<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/dev/media.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:36:26 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard, Edition for Web Developers</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  <script async="" src=search.js></script>
  
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   
   <hgroup><h1><a rel=home href=index.html>HTML: The Living Standard</a></h1><p id=dev-edition-h2>Edition for Web Developers — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   

   <div id=search>
    <input placeholder="Search. Press '/'" autocomplete=off name=query id=query type=search>
    <ol id=results></ol>
   </div>
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=iframe-embed-object.html>← 4.8.5 The
  iframe element</a> — <a href=index.html>Table of Contents</a> — <a href=image-maps.html>4.8.12 The map element →</a></nav><ol class=toc><li><ol><li><ol><li><a href=media.html#the-video-element><span class=secno>4.8.8</span> The <code>video</code> element</a><li><a href=media.html#the-audio-element><span class=secno>4.8.9</span> The <code>audio</code> element</a><li><a href=media.html#the-track-element><span class=secno>4.8.10</span> The <code>track</code> element</a><li><a href=media.html#media-elements><span class=secno>4.8.11</span> Media elements</a><ol><li><a href=media.html#error-codes><span class=secno>4.8.11.1</span> Error codes</a><li><a href=media.html#location-of-the-media-resource><span class=secno>4.8.11.2</span> Location of the media resource</a><li><a href=media.html#mime-types><span class=secno>4.8.11.3</span> MIME types</a><li><a href=media.html#network-states><span class=secno>4.8.11.4</span> Network states</a><li><a href=media.html#loading-the-media-resource><span class=secno>4.8.11.5</span> Loading the media resource</a><li><a href=media.html#offsets-into-the-media-resource><span class=secno>4.8.11.6</span> Offsets into the media resource</a><li><a href=media.html#ready-states><span class=secno>4.8.11.7</span> Ready states</a><li><a href=media.html#playing-the-media-resource><span class=secno>4.8.11.8</span> Playing the media resource</a><li><a href=media.html#seeking><span class=secno>4.8.11.9</span> Seeking</a><li><a href=media.html#media-resources-with-multiple-media-tracks><span class=secno>4.8.11.10</span> Media resources with multiple media tracks</a><ol><li><a href=media.html#audiotracklist-and-videotracklist-objects><span class=secno>4.8.11.10.1</span> <code>AudioTrackList</code> and <code>VideoTrackList</code> objects</a><li><a href=media.html#selecting-specific-audio-and-video-tracks-declaratively><span class=secno>4.8.11.10.2</span> Selecting specific audio and video tracks declaratively</a></ol><li><a href=media.html#timed-text-tracks><span class=secno>4.8.11.11</span> Timed text tracks</a><ol><li><a href=media.html#text-track-model><span class=secno>4.8.11.11.1</span> Text track model</a><li><a href=media.html#sourcing-in-band-text-tracks><span class=secno>4.8.11.11.2</span> Sourcing in-band text tracks</a><li><a href=media.html#text-track-api><span class=secno>4.8.11.11.3</span> Text track API</a><li><a href=media.html#best-practices-for-metadata-text-tracks><span class=secno>4.8.11.11.4</span> Best practices for metadata text tracks</a></ol><li><a href=media.html#identifying-a-track-kind-through-a-url><span class=secno>4.8.11.12</span> Identifying a track kind through a URL</a><li><a href=media.html#user-interface><span class=secno>4.8.11.13</span> User interface</a><li><a href=media.html#time-ranges><span class=secno>4.8.11.14</span> Time ranges</a><li><a href=media.html#the-trackevent-interface><span class=secno>4.8.11.15</span> The <code>TrackEvent</code> interface</a><li><a href=media.html#mediaevents><span class=secno>4.8.11.16</span> Events summary</a><li><a href=media.html#best-practices-for-authors-using-media-elements><span class=secno>4.8.11.17</span> Best practices for authors using media elements</a></ol></ol></ol></ol><h4 id=the-video-element><span class=secno>4.8.8</span> The <dfn id=video data-dfn-type=element><code>video</code></dfn> element<a href=#the-video-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video title="The <video> HTML element embeds a media player which supports video playback into the document. You can use <video> for audio content as well, but the <audio> element may provide a more appropriate user experience.">Element/video</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-video-element:concept-element-categories>Categories</a>:<dd><a id=the-video-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-video-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-video-element:embedded-content-category href=dom.html#embedded-content-category>Embedded content</a>.<dd>If the element has a <code id=the-video-element:attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute: <a id=the-video-element:interactive-content-2 href=dom.html#interactive-content-2>Interactive content</a>.<dd><a id=the-video-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-video-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-video-element:embedded-content-category-2 href=dom.html#embedded-content-category>embedded content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-video-element:concept-element-content-model>Content model</a>:<dd>If the element has a <code id=the-video-element:attr-media-src><a href=#attr-media-src>src</a></code> attribute:
 zero or more <code id=the-video-element:the-track-element><a href=#the-track-element>track</a></code> elements, then
 <a id=the-video-element:transparent href=dom.html#transparent>transparent</a>, but with no <a href=#media-element id=the-video-element:media-element>media element</a> descendants.<dd>If the element does not have a <code id=the-video-element:attr-media-src-2><a href=#attr-media-src>src</a></code> attribute: zero or more <code id=the-video-element:the-source-element><a href=embedded-content.html#the-source-element>source</a></code> elements, then
 zero or more <code id=the-video-element:the-track-element-2><a href=#the-track-element>track</a></code> elements, then
 <a id=the-video-element:transparent-2 href=dom.html#transparent>transparent</a>, but with no <a href=#media-element id=the-video-element:media-element-2>media element</a> descendants.<dt><a href=dom.html#concept-element-tag-omission id=the-video-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-video-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-video-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-video-element:attr-media-src-3><a href=#attr-media-src>src</a></code> —  Address of the resource
     <dd><code id=the-video-element:attr-media-crossorigin><a href=#attr-media-crossorigin>crossorigin</a></code> —  How the element handles crossorigin requests
     <dd><code id=the-video-element:attr-video-poster><a href=#attr-video-poster>poster</a></code> —  Poster frame to show prior to video playback
     <dd><code id=the-video-element:attr-media-preload><a href=#attr-media-preload>preload</a></code> —  Hints how much buffering the <a href=#media-resource id=the-video-element:media-resource>media resource</a> will likely need
     <dd><code id=the-video-element:attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code> —  Hint that the <a href=#media-resource id=the-video-element:media-resource-2>media resource</a> can be started automatically when the page is loaded
     <dd><code id=the-video-element:attr-video-playsinline><a href=#attr-video-playsinline>playsinline</a></code> —  Encourage the user agent to display video content within the element's playback area
     <dd><code id=the-video-element:attr-media-loop><a href=#attr-media-loop>loop</a></code> —  Whether to loop the <a href=#media-resource id=the-video-element:media-resource-3>media resource</a>
     <dd><code id=the-video-element:attr-media-muted><a href=#attr-media-muted>muted</a></code> —  Whether to mute the <a href=#media-resource id=the-video-element:media-resource-4>media resource</a> by default
     <dd><code id=the-video-element:attr-media-controls-2><a href=#attr-media-controls>controls</a></code> —  Show user agent controls
     <dd><code id=the-video-element:attr-dim-width><a href=embedded-content-other.html#attr-dim-width>width</a></code> —  Horizontal dimension
     <dd><code id=the-video-element:attr-dim-height><a href=embedded-content-other.html#attr-dim-height>height</a></code> —  Vertical dimension
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-video-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-video>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-video>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-video-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLVideoElement</code>.</dl>

  <p>A <code id=the-video-element:the-video-element><a href=#the-video-element>video</a></code> element is used for playing videos or movies, and audio files with
  captions.</p>

  <p>Content may be provided inside the <code id=the-video-element:the-video-element-2><a href=#the-video-element>video</a></code> element; it is intended for older web browsers which do
  not support <code id=the-video-element:the-video-element-3><a href=#the-video-element>video</a></code>, so that text can be shown to the users of these older browsers
  informing them of how to access the video contents.</p>

  <p class=note>In particular, this content is not intended to address accessibility concerns. To
  make video content accessible to the partially sighted, the blind, the hard-of-hearing, the deaf,
  and those with other physical or cognitive disabilities, a variety of features are available.
  Captions can be provided, either embedded in the video stream or as external files using the
  <code id=the-video-element:the-track-element-3><a href=#the-track-element>track</a></code> element. Sign-language tracks can be embedded in the video stream. Audio
  descriptions can be embedded in the video stream or in text form using a <a id=the-video-element:webvtt-file href=https://w3c.github.io/webvtt/#webvtt-file data-x-internal=webvtt-file>WebVTT file</a>
  referenced using the <code id=the-video-element:the-track-element-4><a href=#the-track-element>track</a></code> element and synthesized into speech by the user agent.
  WebVTT can also be used to provide chapter titles. For users who would rather not use a media
  element at all, transcripts or other textual alternatives can be provided by simply linking to
  them in the prose near the <code id=the-video-element:the-video-element-4><a href=#the-video-element>video</a></code> element. <a href=references.html#refsWEBVTT>[WEBVTT]</a></p>

  <p>The <code id=the-video-element:the-video-element-5><a href=#the-video-element>video</a></code> element is a <a href=#media-element id=the-video-element:media-element-3>media element</a> whose <a href=#media-data id=the-video-element:media-data>media data</a> is
  ostensibly video data, possibly with associated audio data.</p>

  <p>The <code id=the-video-element:attr-media-src-4><a href=#attr-media-src>src</a></code>, <code id=the-video-element:attr-media-crossorigin-2><a href=#attr-media-crossorigin>crossorigin</a></code>,
  <code id=the-video-element:attr-media-preload-2><a href=#attr-media-preload>preload</a></code>, <code id=the-video-element:attr-media-autoplay-2><a href=#attr-media-autoplay>autoplay</a></code>,
  <code id=the-video-element:attr-media-loop-2><a href=#attr-media-loop>loop</a></code>, <code id=the-video-element:attr-media-muted-2><a href=#attr-media-muted>muted</a></code>, and <code id=the-video-element:attr-media-controls-3><a href=#attr-media-controls>controls</a></code> attributes are <a href=#media-element-attributes id=the-video-element:media-element-attributes>the attributes common to all media elements</a>.</p>

  <p>The <dfn data-dfn-for=video id=attr-video-poster data-dfn-type=element-attr><code>poster</code></dfn>
  attribute gives the <a id=the-video-element:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of an image file that the user agent can show while no video
  data is available.  The attribute, if present, must contain a <a id=the-video-element:valid-non-empty-url-potentially-surrounded-by-spaces href=urls-and-fetching.html#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL
  potentially surrounded by spaces</a>.</p>

  

  <p class=note>The image given by the <code id=the-video-element:attr-video-poster-2><a href=#attr-video-poster>poster</a></code> attribute,
  the <i>poster frame</i>, is intended to be a representative frame of the
  video (typically one of the first non-blank frames) that gives the user an idea of what the video
  is like.</p>


  <p>The <dfn data-dfn-for=video id=attr-video-playsinline data-dfn-type=element-attr><code>playsinline</code></dfn> attribute is a <a id=the-video-element:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean
  attribute</a>. If present, it serves as a hint to the user agent that the video ought to be
  displayed "inline" in the document by default, constrained to the element's playback area, instead
  of being displayed fullscreen or in an independent resizable window.</p>

  <p class=note>The absence of the <code id=the-video-element:attr-video-playsinline-2><a href=#attr-video-playsinline>playsinline</a></code>
  attribute does not imply that the video will display fullscreen by default. Indeed, most user
  agents have chosen to play all videos inline by default, and in such user agents the <code id=the-video-element:attr-video-playsinline-3><a href=#attr-video-playsinline>playsinline</a></code> attribute has no effect.</p>

  

  <dl class=domintro><dt><code><var>video</var>.<span id=dom-video-videowidth>videoWidth</span></code><dt><code><var>video</var>.<span id=dom-video-videoheight>videoHeight</span></code><dd>
    <p>These attributes return the natural dimensions of the video, or 0 if the dimensions are not
    known.</p>
   </dl>

  

  <p>The <code id=the-video-element:the-video-element-6><a href=#the-video-element>video</a></code> element supports <a id=the-video-element:dimension-attributes href=embedded-content-other.html#dimension-attributes>dimension attributes</a>.</p>

  

  <div class=example>

   <p>This example shows how to detect when a video has failed to play correctly:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- a>function</c-> failed<c- p>(</c->e<c- p>)</c-> <c- p>{</c->
   <c- c1>// video playback failed - show a message saying why</c->
   <c- k>switch</c-> <c- p>(</c->e<c- p>.</c->target<c- p>.</c->error<c- p>.</c->code<c- p>)</c-> <c- p>{</c->
     <c- k>case</c-> e<c- p>.</c->target<c- p>.</c->error<c- p>.</c->MEDIA_ERR_ABORTED<c- o>:</c->
       alert<c- p>(</c-><c- t>&apos;You aborted the video playback.&apos;</c-><c- p>);</c->
       <c- k>break</c-><c- p>;</c->
     <c- k>case</c-> e<c- p>.</c->target<c- p>.</c->error<c- p>.</c->MEDIA_ERR_NETWORK<c- o>:</c->
       alert<c- p>(</c-><c- t>&apos;A network error caused the video download to fail part-way.&apos;</c-><c- p>);</c->
       <c- k>break</c-><c- p>;</c->
     <c- k>case</c-> e<c- p>.</c->target<c- p>.</c->error<c- p>.</c->MEDIA_ERR_DECODE<c- o>:</c->
       alert<c- p>(</c-><c- t>&apos;The video playback was aborted due to a corruption problem or because the video used features your browser did not support.&apos;</c-><c- p>);</c->
       <c- k>break</c-><c- p>;</c->
     <c- k>case</c-> e<c- p>.</c->target<c- p>.</c->error<c- p>.</c->MEDIA_ERR_SRC_NOT_SUPPORTED<c- o>:</c->
       alert<c- p>(</c-><c- t>&apos;The video could not be loaded, either because the server or network failed or because the format is not supported.&apos;</c-><c- p>);</c->
       <c- k>break</c-><c- p>;</c->
     <c- k>default</c-><c- o>:</c->
       alert<c- p>(</c-><c- t>&apos;An unknown error occurred.&apos;</c-><c- p>);</c->
       <c- k>break</c-><c- p>;</c->
   <c- p>}</c->
 <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>video</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;tgif.vid&quot;</c-> <c- e>autoplay</c-> <c- e>controls</c-> <c- e>onerror</c-><c- o>=</c-><c- s>&quot;failed(event)&quot;</c-><c- p>&gt;&lt;/</c-><c- f>video</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;tgif.vid&quot;</c-><c- p>&gt;</c->Download the video file<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>




  





  <h4 id=the-audio-element><span class=secno>4.8.9</span> The <dfn id=audio data-dfn-type=element><code>audio</code></dfn> element<a href=#the-audio-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio title="The <audio> HTML element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream.">Element/audio</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-audio-element:concept-element-categories>Categories</a>:<dd><a id=the-audio-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-audio-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-audio-element:embedded-content-category href=dom.html#embedded-content-category>Embedded content</a>.<dd>If the element has a <code id=the-audio-element:attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute: <a id=the-audio-element:interactive-content-2 href=dom.html#interactive-content-2>Interactive content</a>.<dd>If the element has a <code id=the-audio-element:attr-media-controls-2><a href=#attr-media-controls>controls</a></code> attribute: <a id=the-audio-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-audio-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-audio-element:embedded-content-category-2 href=dom.html#embedded-content-category>embedded content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-audio-element:concept-element-content-model>Content model</a>:<dd>If the element has a <code id=the-audio-element:attr-media-src><a href=#attr-media-src>src</a></code> attribute:
zero or more <code id=the-audio-element:the-track-element><a href=#the-track-element>track</a></code> elements, then
<a id=the-audio-element:transparent href=dom.html#transparent>transparent</a>, but with no <a href=#media-element id=the-audio-element:media-element>media element</a> descendants.<dd>If the element does not have a <code id=the-audio-element:attr-media-src-2><a href=#attr-media-src>src</a></code> attribute: zero or more <code id=the-audio-element:the-source-element><a href=embedded-content.html#the-source-element>source</a></code> elements, then
 zero or more <code id=the-audio-element:the-track-element-2><a href=#the-track-element>track</a></code> elements, then
 <a id=the-audio-element:transparent-2 href=dom.html#transparent>transparent</a>, but with no <a href=#media-element id=the-audio-element:media-element-2>media element</a> descendants.<dt><a href=dom.html#concept-element-tag-omission id=the-audio-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-audio-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-audio-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-audio-element:attr-media-src-3><a href=#attr-media-src>src</a></code> —  Address of the resource
     <dd><code id=the-audio-element:attr-media-crossorigin><a href=#attr-media-crossorigin>crossorigin</a></code> —  How the element handles crossorigin requests
     <dd><code id=the-audio-element:attr-media-preload><a href=#attr-media-preload>preload</a></code> —  Hints how much buffering the <a href=#media-resource id=the-audio-element:media-resource>media resource</a> will likely need
     <dd><code id=the-audio-element:attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code> —  Hint that the <a href=#media-resource id=the-audio-element:media-resource-2>media resource</a> can be started automatically when the page is loaded
     <dd><code id=the-audio-element:attr-media-loop><a href=#attr-media-loop>loop</a></code> —  Whether to loop the <a href=#media-resource id=the-audio-element:media-resource-3>media resource</a>
     <dd><code id=the-audio-element:attr-media-muted><a href=#attr-media-muted>muted</a></code> —  Whether to mute the <a href=#media-resource id=the-audio-element:media-resource-4>media resource</a> by default
     <dd><code id=the-audio-element:attr-media-controls-3><a href=#attr-media-controls>controls</a></code> —  Show user agent controls
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-audio-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-audio>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-audio>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-audio-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLAudioElement</code>.</dl>

  <p>An <code id=the-audio-element:the-audio-element><a href=#the-audio-element>audio</a></code> element <a id=the-audio-element:represents href=dom.html#represents>represents</a> a sound or audio stream.</p>

  

  <p>Content may be provided inside the <code id=the-audio-element:the-audio-element-2><a href=#the-audio-element>audio</a></code> element; it is intended for older web browsers which do
  not support <code id=the-audio-element:the-audio-element-3><a href=#the-audio-element>audio</a></code>, so that text can be shown to the users of these older browsers
  informing them of how to access the audio contents.</p>

  <p class=note>In particular, this content is not intended to address accessibility concerns. To
  make audio content accessible to the deaf or to those with other physical or cognitive
  disabilities, a variety of features are available. If captions or a sign language video are
  available, the <code id=the-audio-element:the-video-element><a href=#the-video-element>video</a></code> element can be used instead of the <code id=the-audio-element:the-audio-element-4><a href=#the-audio-element>audio</a></code> element to
  play the audio, allowing users to enable the visual alternatives. Chapter titles can be provided
  to aid navigation, using the <code id=the-audio-element:the-track-element-3><a href=#the-track-element>track</a></code> element and a <a id=the-audio-element:webvtt-file href=https://w3c.github.io/webvtt/#webvtt-file data-x-internal=webvtt-file>WebVTT file</a>. And,
  naturally, transcripts or other textual alternatives can be provided by simply linking to them in
  the prose near the <code id=the-audio-element:the-audio-element-5><a href=#the-audio-element>audio</a></code> element. <a href=references.html#refsWEBVTT>[WEBVTT]</a></p>

  <p>The <code id=the-audio-element:the-audio-element-6><a href=#the-audio-element>audio</a></code> element is a <a href=#media-element id=the-audio-element:media-element-3>media element</a> whose <a href=#media-data id=the-audio-element:media-data>media data</a> is
  ostensibly audio data.</p>

  <p>The <code id=the-audio-element:attr-media-src-4><a href=#attr-media-src>src</a></code>, <code id=the-audio-element:attr-media-crossorigin-2><a href=#attr-media-crossorigin>crossorigin</a></code>,
  <code id=the-audio-element:attr-media-preload-2><a href=#attr-media-preload>preload</a></code>, <code id=the-audio-element:attr-media-autoplay-2><a href=#attr-media-autoplay>autoplay</a></code>,
  <code id=the-audio-element:attr-media-loop-2><a href=#attr-media-loop>loop</a></code>, <code id=the-audio-element:attr-media-muted-2><a href=#attr-media-muted>muted</a></code>, and <code id=the-audio-element:attr-media-controls-4><a href=#attr-media-controls>controls</a></code> attributes are <a href=#media-element-attributes id=the-audio-element:media-element-attributes>the attributes common to all media elements</a>.</p>

  <dl class=domintro><dt><code><var>audio</var> = new <span id=dom-audio>Audio</span>([ <var>url</var> ])</code><dd>
    <p>Returns a new <code id=the-audio-element:the-audio-element-7><a href=#the-audio-element>audio</a></code> element, with the <code id=the-audio-element:attr-media-src-5><a href=#attr-media-src>src</a></code>
    attribute set to the value passed in the argument, if applicable.</p>
   </dl>

  



  



  <h4 id=the-track-element><span class=secno>4.8.10</span> The <dfn data-dfn-type=element><code>track</code></dfn> element<a href=#the-track-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track title="The <track> HTML element is used as a child of the media elements, <audio> and <video>. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in WebVTT format (.vtt files) — Web Video Text Tracks.">Element/track</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android yes"><span>Chrome Android</span><span>25+</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-track-element:concept-element-categories>Categories</a>:<dd>None.<dt><a href=dom.html#concept-element-contexts id=the-track-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As a child of a <a href=#media-element id=the-track-element:media-element>media element</a>, before any <a id=the-track-element:flow-content-2 href=dom.html#flow-content-2>flow content</a>.<dt><a href=dom.html#concept-element-content-model id=the-track-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#concept-content-nothing id=the-track-element:concept-content-nothing>Nothing</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-track-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>No <a href=syntax.html#syntax-end-tag id=the-track-element:syntax-end-tag>end tag</a>.<dt><a href=dom.html#concept-element-attributes id=the-track-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-track-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-track-element:attr-track-kind><a href=#attr-track-kind>kind</a></code> —  The type of text track
     <dd><code id=the-track-element:attr-track-src><a href=#attr-track-src>src</a></code> —  Address of the resource
     <dd><code id=the-track-element:attr-track-srclang><a href=#attr-track-srclang>srclang</a></code> —  Language of the text track
     <dd><code id=the-track-element:attr-track-label><a href=#attr-track-label>label</a></code> —  User-visible label
     <dd><code id=the-track-element:attr-track-default><a href=#attr-track-default>default</a></code> —  Enable the track if no other <a href=#text-track id=the-track-element:text-track>text track</a> is more suitable
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-track-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-track>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-track>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-track-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLTrackElement</code>.</dl>

  <p>The <code id=the-track-element:the-track-element><a href=#the-track-element>track</a></code> element allows authors to specify explicit external timed <a href=#text-track id=the-track-element:text-track-2>text tracks</a> for <a href=#media-element id=the-track-element:media-element-2>media elements</a>. It
  does not <a href=dom.html#represents id=the-track-element:represents>represent</a> anything on its own.</p>

  <p>The <dfn data-dfn-for=track id=attr-track-kind data-dfn-type=element-attr><code>kind</code></dfn> attribute is
  an <a id=the-track-element:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a> with the following keywords and states:</p>

  <table><thead><tr><th>Keyword
     <th>State
     <th>Brief description
   <tbody><tr><td><dfn data-dfn-for=track/kind id=attr-track-kind-keyword-subtitles data-dfn-type=attr-value><code>subtitles</code></dfn>
     <td><dfn id=attr-track-kind-subtitles>Subtitles</dfn>
     <td>
      Transcription or translation of the dialogue, suitable for when the sound is available but not understood (e.g. because the user does not understand the language of the <a href=#media-resource id=the-track-element:media-resource>media resource</a>'s audio track).
      Overlaid on the video.
    <tr><td><dfn data-dfn-for=track/kind id=attr-track-kind-keyword-captions data-dfn-type=attr-value><code>captions</code></dfn>
     <td><dfn id=attr-track-kind-captions>Captions</dfn>
     <td>
      Transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information, suitable for when sound is unavailable or not clearly audible (e.g. because it is muted, drowned-out by ambient noise, or because the user is deaf).
      Overlaid on the video; labeled as appropriate for the hard-of-hearing.
    <tr><td><dfn data-dfn-for=track/kind id=attr-track-kind-keyword-descriptions data-dfn-type=attr-value><code>descriptions</code></dfn>
     <td><dfn id=attr-track-kind-descriptions>Descriptions</dfn>
     <td>
      Textual descriptions of the video component of the <a href=#media-resource id=the-track-element:media-resource-2>media resource</a>, intended for audio synthesis when the visual component is obscured, unavailable, or not usable (e.g. because the user is interacting with the application without a screen while driving, or because the user is blind).
      Synthesized as audio.
    <tr><td><dfn data-dfn-for=track/kind id=attr-track-kind-keyword-chapters data-dfn-type=attr-value><code>chapters</code></dfn>
     <td><dfn id=attr-track-kind-chapters>Chapters metadata</dfn>
     <td rowspan=2>
      Tracks intended for use from script.
      Not displayed by the user agent.
    <tr><td><dfn data-dfn-for=track/kind id=attr-track-kind-keyword-metadata data-dfn-type=attr-value><code>metadata</code></dfn>
     <td><dfn id=attr-track-kind-metadata>Metadata</dfn>
  </table>

  <p>The attribute's <i id=the-track-element:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> is the <a href=#attr-track-kind-subtitles id=the-track-element:attr-track-kind-subtitles>subtitles</a> state, and its <i id=the-track-element:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> is the <a href=#attr-track-kind-metadata id=the-track-element:attr-track-kind-metadata>metadata</a>
  state.</p>

  <p>The <dfn data-dfn-for=track id=attr-track-src data-dfn-type=element-attr><code>src</code></dfn> attribute
  gives the <a id=the-track-element:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of the text track data. The value must be a <a id=the-track-element:valid-non-empty-url-potentially-surrounded-by-spaces href=urls-and-fetching.html#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL
  potentially surrounded by spaces</a>. This attribute must be present.</p>

  

  <p>If the element's <span>track URL</span> identifies a WebVTT resource, and the element's <code id=the-track-element:attr-track-kind-2><a href=#attr-track-kind>kind</a></code> attribute is not in the <a href=#attr-track-kind-chapters id=the-track-element:attr-track-kind-chapters>chapters metadata</a> or <a href=#attr-track-kind-metadata id=the-track-element:attr-track-kind-metadata-2>metadata</a> state, then the WebVTT file must be a
  <a id=the-track-element:webvtt-file-using-cue-text href=https://w3c.github.io/webvtt/#webvtt-file-using-cue-text data-x-internal=webvtt-file-using-cue-text>WebVTT file using cue text</a>. <a href=references.html#refsWEBVTT>[WEBVTT]</a></p>

  <p>The <dfn data-dfn-for=track id=attr-track-srclang data-dfn-type=element-attr><code>srclang</code></dfn>
  attribute gives the language of the text track data. The value must be a valid BCP 47 language
  tag. This attribute must be present if the element's <code id=the-track-element:attr-track-kind-3><a href=#attr-track-kind>kind</a></code>
  attribute is in the <a href=#attr-track-kind-subtitles id=the-track-element:attr-track-kind-subtitles-2>subtitles</a> state.
  <a href=references.html#refsBCP47>[BCP47]</a></p>

  

  <p>The <dfn data-dfn-for=track id=attr-track-label data-dfn-type=element-attr><code>label</code></dfn> attribute
  gives a user-readable title for the track. This title is used by user agents when listing <a href=#attr-track-kind-subtitles id=the-track-element:attr-track-kind-subtitles-3>subtitle</a>, <a href=#attr-track-kind-captions id=the-track-element:attr-track-kind-captions>caption</a>, and <a href=#attr-track-kind-descriptions id=the-track-element:attr-track-kind-descriptions>audio description</a> tracks in their user interface.</p>

  <p>The value of the <code id=the-track-element:attr-track-label-2><a href=#attr-track-label>label</a></code> attribute, if the attribute is
  present, must not be the empty string. Furthermore, there must not be two <code id=the-track-element:the-track-element-2><a href=#the-track-element>track</a></code>
  element children of the same <a href=#media-element id=the-track-element:media-element-3>media element</a> whose <code id=the-track-element:attr-track-kind-4><a href=#attr-track-kind>kind</a></code> attributes are in the same state, whose <code id=the-track-element:attr-track-srclang-2><a href=#attr-track-srclang>srclang</a></code> attributes are both missing or have values that
  represent the same language, and whose <code id=the-track-element:attr-track-label-3><a href=#attr-track-label>label</a></code> attributes are
  again both missing or both have the same value.</p>

  

  <p>The <dfn data-dfn-for=track id=attr-track-default data-dfn-type=element-attr><code>default</code></dfn>
  attribute is a <a id=the-track-element:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>, which, if specified, indicates that the track is to
  be enabled if the user's preferences do not indicate that another track would be more
  appropriate.</p>

  <p>Each <a href=#media-element id=the-track-element:media-element-4>media element</a> must have no more than one <code id=the-track-element:the-track-element-3><a href=#the-track-element>track</a></code> element child
  whose <code id=the-track-element:attr-track-kind-5><a href=#attr-track-kind>kind</a></code> attribute is in the <a href=#attr-track-kind-subtitles id=the-track-element:attr-track-kind-subtitles-4>subtitles</a> or <a href=#attr-track-kind-captions id=the-track-element:attr-track-kind-captions-2>captions</a> state and whose <code id=the-track-element:attr-track-default-2><a href=#attr-track-default>default</a></code> attribute is specified.</p>

  <p>Each <a href=#media-element id=the-track-element:media-element-5>media element</a> must have no more than one <code id=the-track-element:the-track-element-4><a href=#the-track-element>track</a></code> element child
  whose <code id=the-track-element:attr-track-kind-6><a href=#attr-track-kind>kind</a></code> attribute is in the <a href=#attr-track-kind-descriptions id=the-track-element:attr-track-kind-descriptions-2>description</a> state and whose <code id=the-track-element:attr-track-default-3><a href=#attr-track-default>default</a></code> attribute is specified.</p>

  <p>Each <a href=#media-element id=the-track-element:media-element-6>media element</a> must have no more than one <code id=the-track-element:the-track-element-5><a href=#the-track-element>track</a></code> element child
  whose <code id=the-track-element:attr-track-kind-7><a href=#attr-track-kind>kind</a></code> attribute is in the <a href=#attr-track-kind-chapters id=the-track-element:attr-track-kind-chapters-2>chapters metadata</a> state and whose <code id=the-track-element:attr-track-default-4><a href=#attr-track-default>default</a></code> attribute is specified.</p>

  <p class=note>There is no limit on the number of <code id=the-track-element:the-track-element-6><a href=#the-track-element>track</a></code> elements whose <code id=the-track-element:attr-track-kind-8><a href=#attr-track-kind>kind</a></code> attribute is in the <a href=#attr-track-kind-metadata id=the-track-element:attr-track-kind-metadata-3>metadata</a> state and whose <code id=the-track-element:attr-track-default-5><a href=#attr-track-default>default</a></code> attribute is specified.</p>

  <dl class=domintro><dt><code><var>track</var>.<span id=dom-track-readystate>readyState</span></code><dd>
    <p>Returns the <a href=#text-track-readiness-state id=the-track-element:text-track-readiness-state>text track readiness state</a>, represented by a number from the
    following list:</p>
    <dl><dt><code><var>track</var>.<span id=dom-track-none>NONE</span> (0)</code><dd><p>The <a href=#text-track-not-loaded id=the-track-element:text-track-not-loaded>text track not loaded</a> state.<dt><code><var>track</var>.<span id=dom-track-loading>LOADING</span> (1)</code><dd><p>The <a href=#text-track-loading id=the-track-element:text-track-loading>text track loading</a> state.<dt><code><var>track</var>.<span id=dom-track-loaded>LOADED</span> (2)</code><dd><p>The <a href=#text-track-loaded id=the-track-element:text-track-loaded>text track loaded</a> state.<dt><code><var>track</var>.<span id=dom-track-error>ERROR</span> (3)</code><dd><p>The <a href=#text-track-failed-to-load id=the-track-element:text-track-failed-to-load>text track failed to load</a> state.</dl>
   <dt><code><var>track</var>.<span id=dom-track-track>track</span></code><dd>
    <p>Returns the <code>TextTrack</code> object corresponding to the <a href=#text-track id=the-track-element:text-track-3>text track</a> of the
    <code id=the-track-element:the-track-element-7><a href=#the-track-element>track</a></code> element.</p>
   </dl>

  

  <div class=example>

   <p>This video has subtitles in several languages:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>video</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;brave.webm&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>track</c-> <c- e>kind</c-><c- o>=</c-><c- s>subtitles</c-> <c- e>src</c-><c- o>=</c-><c- s>brave.en.vtt</c-> <c- e>srclang</c-><c- o>=</c-><c- s>en</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;English&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>track</c-> <c- e>kind</c-><c- o>=</c-><c- s>captions</c-> <c- e>src</c-><c- o>=</c-><c- s>brave.en.hoh.vtt</c-> <c- e>srclang</c-><c- o>=</c-><c- s>en</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;English for the Hard of Hearing&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>track</c-> <c- e>kind</c-><c- o>=</c-><c- s>subtitles</c-> <c- e>src</c-><c- o>=</c-><c- s>brave.fr.vtt</c-> <c- e>srclang</c-><c- o>=</c-><c- s>fr</c-> <c- e>lang</c-><c- o>=</c-><c- s>fr</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;Français&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>track</c-> <c- e>kind</c-><c- o>=</c-><c- s>subtitles</c-> <c- e>src</c-><c- o>=</c-><c- s>brave.de.vtt</c-> <c- e>srclang</c-><c- o>=</c-><c- s>de</c-> <c- e>lang</c-><c- o>=</c-><c- s>de</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;Deutsch&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>video</c-><c- p>&gt;</c-></code></pre>

   <p>(The <code id=the-track-element:attr-lang><a href=dom.html#attr-lang>lang</a></code> attributes on the last two describe the language of
   the <code id=the-track-element:attr-track-label-4><a href=#attr-track-label>label</a></code> attribute, not the language of the subtitles
   themselves. The language of the subtitles is given by the <code id=the-track-element:attr-track-srclang-3><a href=#attr-track-srclang>srclang</a></code> attribute.)</p>

  </div>

  <h4 id=media-elements><span class=secno>4.8.11</span> Media elements<a href=#media-elements class=self-link></a></h4>

  <p><span>HTMLMediaElement</span> objects (<code id=media-elements:the-audio-element><a href=#the-audio-element>audio</a></code> and <code id=media-elements:the-video-element><a href=#the-video-element>video</a></code>, in this
  specification) are simply known as <dfn id=media-element data-lt="media element" data-export="">media elements</dfn>.</p>

  

  <p>The <dfn id=media-element-attributes>media element attributes</dfn>, <code id=media-elements:attr-media-src><a href=#attr-media-src>src</a></code>, <code id=media-elements:attr-media-crossorigin><a href=#attr-media-crossorigin>crossorigin</a></code>, <code id=media-elements:attr-media-preload><a href=#attr-media-preload>preload</a></code>, <code id=media-elements:attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code>,
  <code id=media-elements:attr-media-loop><a href=#attr-media-loop>loop</a></code>, <code id=media-elements:attr-media-muted><a href=#attr-media-muted>muted</a></code>, and
  <code id=media-elements:attr-media-controls><a href=#attr-media-controls>controls</a></code>, apply to all <a href=#media-element id=media-elements:media-element>media elements</a>. They are defined in this section.</p>

  

  <p><a href=#media-element id=media-elements:media-element-2>Media elements</a> are used to present audio data, or video and
  audio data, to the user. This is referred to as <dfn data-dfn-for=HTMLMediaElement id=media-data data-export="">media data</dfn>
  in this section, since this section applies equally to <a href=#media-element id=media-elements:media-element-3>media
  elements</a> for audio or for video.

  The term <dfn id=media-resource>media resource</dfn> is used to refer to the complete set of media data, e.g. the
  complete video file, or complete audio file.

  </p>

  <p>A <a href=#media-resource id=media-elements:media-resource>media resource</a> has an associated
  <dfn id=media-resource-origin>origin</dfn>, which is either "<code>none</code>",
  "<code>multiple</code>", "<code>rewritten</code>", or an
  <a id=media-elements:concept-origin href=browsers.html#concept-origin>origin</a>. It is initially set to "<code>none</code>".</p>

  <p>A <a href=#media-resource id=media-elements:media-resource-2>media resource</a> can have multiple audio and video tracks. For the purposes of a
  <a href=#media-element id=media-elements:media-element-4>media element</a>, the video data of the <a href=#media-resource id=media-elements:media-resource-3>media resource</a> is only that of the
  currently selected track (if any) as given by the element's <code id=media-elements:dom-media-videotracks><a href=#dom-media-videotracks>videoTracks</a></code> attribute when the <a id=media-elements:event-loop href=webappapis.html#event-loop>event loop</a> last
  reached <a href=#step1>step 1</a>, and the audio data of the <a href=#media-resource id=media-elements:media-resource-4>media resource</a> is the result of mixing all
  the currently enabled tracks (if any) given by the element's <code id=media-elements:dom-media-audiotracks><a href=#dom-media-audiotracks>audioTracks</a></code> attribute when the <a id=media-elements:event-loop-2 href=webappapis.html#event-loop>event loop</a> last
  reached <a href=#step1>step 1</a>.</p>

  <p class=note>Both <code id=media-elements:the-audio-element-2><a href=#the-audio-element>audio</a></code> and <code id=media-elements:the-video-element-2><a href=#the-video-element>video</a></code> elements can be used for both audio
  and video. The main difference between the two is simply that the <code id=media-elements:the-audio-element-3><a href=#the-audio-element>audio</a></code> element has
  no playback area for visual content (such as video or captions), whereas the <code id=media-elements:the-video-element-3><a href=#the-video-element>video</a></code>
  element does.</p>

  



  <h5 id=error-codes><span class=secno>4.8.11.1</span> Error codes<a href=#error-codes class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/MediaError title="The MediaError interface represents an error which occurred while handling media in an HTML media element based on HTMLMediaElement, such as <audio> or <video>.">MediaError</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <dl class=domintro><dt><code><var>media</var>.<span id=dom-media-error>error</span></code><dd>
    <p>Returns a <code>MediaError</code> object representing the current error state of the
    element.</p>

    <p>Returns null if there is no error.</p>
   </dl>

  

  

  <dl class=domintro><dt><code><var>media</var>.<a href=#dom-media-error id=error-codes:dom-media-error>error</a>.<span id=dom-mediaerror-code>code</span></code><dd><p>Returns the current error's error code, from the list below.<dt><code><var>media</var>.<a href=#dom-media-error id=error-codes:dom-media-error-2>error</a>.<span id=dom-mediaerror-message>message</span></code><dd>
    <p>Returns a specific informative diagnostic message about the error condition encountered. The
    message and message format are not generally uniform across different user agents. If no such
    message is available, then the empty string is returned.</p>
   </dl>

  

  <dl><dt><dfn data-dfn-for=MediaError id=dom-mediaerror-media_err_aborted data-dfn-type=const><code>MEDIA_ERR_ABORTED</code></dfn> (numeric value 1)<dd>The fetching process for the <a href=#media-resource id=error-codes:media-resource>media resource</a> was aborted by the user agent at the
   user's request.<dt><dfn data-dfn-for=MediaError id=dom-mediaerror-media_err_network data-dfn-type=const><code>MEDIA_ERR_NETWORK</code></dfn> (numeric value 2)<dd>A network error of some description caused the user agent to stop fetching the <a href=#media-resource id=error-codes:media-resource-2>media
   resource</a>, after the resource was established to be usable.<dt><dfn data-dfn-for=MediaError id=dom-mediaerror-media_err_decode data-dfn-type=const><code>MEDIA_ERR_DECODE</code></dfn> (numeric value 3)<dd>An error of some description occurred while decoding the <a href=#media-resource id=error-codes:media-resource-3>media resource</a>, after
   the resource was established to be usable.<dt><dfn data-dfn-for=MediaError id=dom-mediaerror-media_err_src_not_supported data-dfn-type=const><code>MEDIA_ERR_SRC_NOT_SUPPORTED</code></dfn> (numeric value 4)<dd>The <a href=#media-resource id=error-codes:media-resource-4>media resource</a> indicated by the <code id=error-codes:attr-media-src><a href=#attr-media-src>src</a></code>
   attribute or <span>assigned media provider object</span> was not suitable.</dl>

  




  <h5 id=location-of-the-media-resource><span class=secno>4.8.11.2</span> Location of the media resource<a href=#location-of-the-media-resource class=self-link></a></h5>

  <p>The <dfn data-dfn-for=audio,video id=attr-media-src data-dfn-type=element-attr><code>src</code></dfn> content
  attribute on <a href=#media-element id=location-of-the-media-resource:media-element>media elements</a> gives the <a id=location-of-the-media-resource:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of the
  media resource (video, audio) to show. The attribute, if present, must contain a <a id=location-of-the-media-resource:valid-non-empty-url-potentially-surrounded-by-spaces href=urls-and-fetching.html#valid-non-empty-url-potentially-surrounded-by-spaces>valid
  non-empty URL potentially surrounded by spaces</a>.</p>

  <p>If the <code id=location-of-the-media-resource:names:-the-itemprop-attribute><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attribute is specified on the <a href=#media-element id=location-of-the-media-resource:media-element-2>media
  element</a>, then the <code id=location-of-the-media-resource:attr-media-src><a href=#attr-media-src>src</a></code> attribute must also be
  specified.</p>

  <p>The <dfn data-dfn-for=audio,video id=attr-media-crossorigin data-dfn-type=element-attr><code>crossorigin</code></dfn> content attribute on <a href=#media-element id=location-of-the-media-resource:media-element-3>media elements</a> is a <a id=location-of-the-media-resource:cors-settings-attribute href=urls-and-fetching.html#cors-settings-attribute>CORS settings attribute</a>.</p>

  

  <p>A <dfn id=media-provider-object>media provider object</dfn> is an object that can represent a <a href=#media-resource id=location-of-the-media-resource:media-resource>media
  resource</a>, separate from a <a id=location-of-the-media-resource:url-2 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>. <code id=location-of-the-media-resource:mediastream><a data-x-internal=mediastream href=https://w3c.github.io/mediacapture-main/getusermedia.html#idl-def-mediastream>MediaStream</a></code> objects,
  <code id=location-of-the-media-resource:mediasource><a data-x-internal=mediasource href=https://w3c.github.io/media-source/#idl-def-mediasource>MediaSource</a></code> objects, and <code id=location-of-the-media-resource:blob><a data-x-internal=blob href=https://w3c.github.io/FileAPI/#dfn-Blob>Blob</a></code> objects are all <a href=#media-provider-object id=location-of-the-media-resource:media-provider-object>media provider objects</a>.</p>

  

  <dl class=domintro><dt><code><var>media</var>.<span id=dom-media-srcobject>srcObject</span> [ = <var>source</var> ]</code><dd>
    <p>Allows the <a href=#media-element id=location-of-the-media-resource:media-element-4>media element</a> to be assigned a <a href=#media-provider-object id=location-of-the-media-resource:media-provider-object-2>media provider
    object</a>.</p>
   <dt><code><var>media</var>.<span id=dom-media-currentsrc>currentSrc</span></code><dd>
    <p>Returns the <a id=location-of-the-media-resource:url-3 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of the current <a href=#media-resource id=location-of-the-media-resource:media-resource-2>media resource</a>, if any.</p>

    <p>Returns the empty string when there is no <a href=#media-resource id=location-of-the-media-resource:media-resource-3>media resource</a>, or it doesn't have a
    <a id=location-of-the-media-resource:url-4 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>.</p>
   </dl>

  

  <p class=note>There are three ways to specify a <a href=#media-resource id=location-of-the-media-resource:media-resource-4>media resource</a>: the <code id=location-of-the-media-resource:dom-media-srcobject><a href=#dom-media-srcobject>srcObject</a></code> IDL attribute, the <code id=location-of-the-media-resource:attr-media-src-2><a href=#attr-media-src>src</a></code> content attribute, and <code id=location-of-the-media-resource:the-source-element><a href=embedded-content.html#the-source-element>source</a></code> elements. The IDL
  attribute takes priority, followed by the content attribute, followed by the elements.</p>



  <h5 id=mime-types><span class=secno>4.8.11.3</span> MIME types<a href=#mime-types class=self-link></a></h5>

  <p>A <a href=#media-resource id=mime-types:media-resource>media resource</a> can be described in terms of its <em>type</em>, specifically a
  <a id=mime-types:mime-type href=https://mimesniff.spec.whatwg.org/#mime-type data-x-internal=mime-type>MIME type</a>, in some cases with a <code>codecs</code> parameter. (Whether the
  <code>codecs</code> parameter is allowed or not depends on the MIME type.)
  <a href=references.html#refsRFC6381>[RFC6381]</a></p>

  <p>Types are usually somewhat incomplete descriptions; for example "<code>video/mpeg</code>" doesn't say anything except what the container type is, and even a
  type like "<code>video/mp4; codecs="avc1.42E01E, mp4a.40.2"</code>" doesn't
  include information like the actual bitrate (only the maximum bitrate). Thus, given a type, a user
  agent can often only know whether it <em>might</em> be able to play media of that type (with
  varying levels of confidence), or whether it definitely <em>cannot</em> play media of that
  type.</p>

  <p><dfn id=a-type-that-the-user-agent-knows-it-cannot-render>A type that the user agent knows it cannot render</dfn> is one that describes a resource
  that the user agent definitely does not support, for example because it doesn't recognize the
  container type, or it doesn't support the listed codecs.</p>

  <p>The <a id=mime-types:mime-type-2 href=https://mimesniff.spec.whatwg.org/#mime-type data-x-internal=mime-type>MIME type</a> "<code id=mime-types:application/octet-stream><a data-x-internal=application/octet-stream href=https://www.rfc-editor.org/rfc/rfc2046#section-4.5.1>application/octet-stream</a></code>" with no parameters is never
  <a href=#a-type-that-the-user-agent-knows-it-cannot-render id=mime-types:a-type-that-the-user-agent-knows-it-cannot-render>a type that the user agent knows it cannot render</a>. User agents must treat that type
  as equivalent to the lack of any explicit <span>Content-Type metadata</span>
  when it is used to label a potential <a href=#media-resource id=mime-types:media-resource-2>media resource</a>.</p>

  <p class=note>Only the <a id=mime-types:mime-type-3 href=https://mimesniff.spec.whatwg.org/#mime-type data-x-internal=mime-type>MIME type</a> "<code id=mime-types:application/octet-stream-2><a data-x-internal=application/octet-stream href=https://www.rfc-editor.org/rfc/rfc2046#section-4.5.1>application/octet-stream</a></code>" with no
  parameters is special-cased here; if any parameter appears with it, it will be treated just like
  any other <a id=mime-types:mime-type-4 href=https://mimesniff.spec.whatwg.org/#mime-type data-x-internal=mime-type>MIME type</a>. This is a deviation from the rule  that unknown <a id=mime-types:mime-type-5 href=https://mimesniff.spec.whatwg.org/#mime-type data-x-internal=mime-type>MIME type</a> parameters should be
  ignored.</p> 

  <dl class=domintro><dt><code><var>media</var>.<span id=dom-navigator-canplaytype>canPlayType</span>(<var>type</var>)</code><dd>
    <p>Returns the empty string (a negative response), "maybe", or "probably" based on how confident
    the user agent is that it can play media resources of the given type.</p>
   </dl>

  

  <div class=example>

   <p>This script tests to see if the user agent supports a (fictional) new format to dynamically
   decide whether to use a <code id=mime-types:the-video-element><a href=#the-video-element>video</a></code> element:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>section</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;video&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;playing-cats.nfv&quot;</c-><c- p>&gt;</c->Download video<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>section</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- a>const</c-> videoSection <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;video&apos;</c-><c- p>);</c->
 <c- a>const</c-> videoElement <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- t>&apos;video&apos;</c-><c- p>);</c->
 <c- a>const</c-> support <c- o>=</c-> videoElement<c- p>.</c->canPlayType<c- p>(</c-><c- t>&apos;video/x-new-fictional-format;codecs=&quot;kittens,bunnies&quot;&apos;</c-><c- p>);</c->
 <c- k>if</c-> <c- p>(</c->support <c- o>===</c-> <c- u>&quot;probably&quot;</c-><c- p>)</c-> <c- p>{</c->
   videoElement<c- p>.</c->setAttribute<c- p>(</c-><c- u>&quot;src&quot;</c-><c- p>,</c-> <c- u>&quot;playing-cats.nfv&quot;</c-><c- p>);</c->
   videoSection<c- p>.</c->replaceChildren<c- p>(</c->videoElement<c- p>);</c->
 <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

  </div>

  <p class=note>The <code id=mime-types:attr-source-type><a href=embedded-content.html#attr-source-type>type</a></code> attribute of the
  <code id=mime-types:the-source-element><a href=embedded-content.html#the-source-element>source</a></code> element allows the user agent to avoid downloading resources that use formats
  it cannot render.</p>


  <h5 id=network-states><span class=secno>4.8.11.4</span> Network states<a href=#network-states class=self-link></a></h5>

  <dl class=domintro><dt><code><var>media</var>.<span id=dom-media-networkstate>networkState</span></code><dd>
    <p>Returns the current state of network activity for the element, from the codes in the list
    below.</p>
   </dl>

  

  <dl><dt><dfn data-dfn-for=HTMLMediaElement id=dom-media-network_empty data-dfn-type=const><code>NETWORK_EMPTY</code></dfn> (numeric value 0)<dd>The element has not yet been initialized. All attributes are in their initial states.<dt><dfn data-dfn-for=HTMLMediaElement id=dom-media-network_idle data-dfn-type=const><code>NETWORK_IDLE</code></dfn> (numeric value 1)<dd>The element has selected a <a href=#media-resource id=network-states:media-resource>resource</a>, but it is not actually using the network at this time.<dt><dfn data-dfn-for=HTMLMediaElement id=dom-media-network_loading data-dfn-type=const><code>NETWORK_LOADING</code></dfn> (numeric value 2)<dd>The user agent is actively trying to download data.<dt><dfn data-dfn-for=HTMLMediaElement id=dom-media-network_no_source data-dfn-type=const><code>NETWORK_NO_SOURCE</code></dfn> (numeric value 3)<dd>The element has not yet found a <a href=#media-resource id=network-states:media-resource-2>resource</a> to use.</dl>

  




  <h5 id=loading-the-media-resource><span class=secno>4.8.11.5</span> Loading the media resource<a href=#loading-the-media-resource class=self-link></a></h5>

  <dl class=domintro><dt><code><var>media</var>.<span id=dom-media-load>load</span>()</code><dd>
    <p>Causes the element to reset and start selecting and loading a new <a href=#media-resource id=loading-the-media-resource:media-resource>media resource</a>
    from scratch.</p>
   </dl>

  

  <hr>

  <p>The <dfn data-dfn-for=audio,video id=attr-media-preload data-dfn-type=element-attr><code>preload</code></dfn>
  attribute is an <a id=loading-the-media-resource:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a> with the following keywords and
  states:</p>

  <table><thead><tr><th>Keyword
     <th>State
     <th>Brief description
   <tbody><tr><td><dfn data-dfn-for=audio/preload,video/preload id=attr-media-preload-auto data-dfn-type=attr-value><code>auto</code></dfn>
     <td rowspan=2><dfn id=attr-media-preload-auto-state>Automatic</dfn>
     <td rowspan=2>Hints to the user agent that the user agent can put the user's needs first without risk to the server, up to and including optimistically downloading the entire resource.
    <tr><td>(the empty string)
    <tr><td><dfn data-dfn-for=audio/preload,video/preload id=attr-media-preload-none data-dfn-type=attr-value><code>none</code></dfn>
     <td><dfn id=attr-media-preload-none-state>None</dfn>
     <td>Hints to the user agent that either the author does not expect the user to need the media resource, or that the server wants to minimize unnecessary traffic.
         This state does not provide a hint regarding how aggressively to actually download the media resource if buffering starts anyway (e.g. once the user hits "play").
    <tr><td><dfn data-dfn-for=audio/preload,video/preload id=attr-media-preload-metadata data-dfn-type=attr-value><code>metadata</code></dfn>
     <td><dfn id=attr-media-preload-metadata-state>Metadata</dfn>
     <td>Hints to the user agent that the author does not expect the user to need the media resource, but that fetching the resource metadata (dimensions, track list, duration, etc.), and maybe even the first few frames, is reasonable. If the user agent precisely fetches no more than the metadata, then the <a href=#media-element id=loading-the-media-resource:media-element>media element</a> will end up with its <code id=loading-the-media-resource:dom-media-readystate><a href=#dom-media-readystate>readyState</a></code> attribute set to <code id=loading-the-media-resource:dom-media-have_metadata><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>; typically though, some frames will be obtained as well and it will probably be <code id=loading-the-media-resource:dom-media-have_current_data><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> or <code id=loading-the-media-resource:dom-media-have_future_data><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code>.
         When the media resource is playing, hints to the user agent that bandwidth is to be considered scarce, e.g. suggesting throttling the download so that the media data is obtained at the slowest possible rate that still maintains consistent playback.
  </table>

  <p>The attribute's <i id=loading-the-media-resource:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and <i id=loading-the-media-resource:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> are both
  <a id=loading-the-media-resource:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a>, though the <a href=#attr-media-preload-metadata-state id=loading-the-media-resource:attr-media-preload-metadata-state>Metadata</a> state is suggested as a compromise
  between reducing server load and providing an optimal user experience.</p>

  <p>The attribute can be changed even once the <a href=#media-resource id=loading-the-media-resource:media-resource-2>media resource</a> is being buffered or
  played; the descriptions in the table above are to be interpreted with that in mind.</p>

  <p class=note>Authors might switch the attribute from "<code id=loading-the-media-resource:attr-media-preload-none><a href=#attr-media-preload-none>none</a></code>" or "<code id=loading-the-media-resource:attr-media-preload-metadata><a href=#attr-media-preload-metadata>metadata</a></code>" to "<code id=loading-the-media-resource:attr-media-preload-auto><a href=#attr-media-preload-auto>auto</a></code>" dynamically once the user begins playback. For
  example, on a page with many videos this might be used to indicate that the many videos are not to
  be downloaded unless requested, but that once one <em>is</em> requested it is to be downloaded
  aggressively.</p>

  

  <p class=note>The <code id=loading-the-media-resource:attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code> attribute can override the
  <code id=loading-the-media-resource:attr-media-preload><a href=#attr-media-preload>preload</a></code> attribute (since if the media plays, it naturally
  has to buffer first, regardless of the hint given by the <code id=loading-the-media-resource:attr-media-preload-2><a href=#attr-media-preload>preload</a></code> attribute). Including both is not an error, however.</p>

  <hr>



  <dl class=domintro><dt><code><var>media</var>.<span id=dom-media-buffered>buffered</span></code><dd>
    <p>Returns a <code>TimeRanges</code> object that represents the ranges of the <a href=#media-resource id=loading-the-media-resource:media-resource-3>media
    resource</a> that the user agent has buffered.</p>
   </dl>

  



  <h5 id=offsets-into-the-media-resource><span class=secno>4.8.11.6</span> Offsets into the media resource<a href=#offsets-into-the-media-resource class=self-link></a></h5>

  <dl class=domintro><dt><code><var>media</var>.<span id=dom-media-duration>duration</span></code><dd>
    <p>Returns the length of the <a href=#media-resource id=offsets-into-the-media-resource:media-resource>media resource</a>, in seconds, assuming that the start of
    the <a href=#media-resource id=offsets-into-the-media-resource:media-resource-2>media resource</a> is at time zero.</p>

    <p>Returns NaN if the duration isn't available.</p>

    <p>Returns Infinity for unbounded streams.</p>
   <dt><code><var>media</var>.<span id=dom-media-currenttime>currentTime</span> [ = <var>value</var> ]</code><dd>
    <p>Returns the <span>official playback position</span>, in seconds.</p>

    <p>Can be set, to seek to the given time.</p>
   </dl>

  

  <hr>

  <p>The <dfn data-dfn-for=audio,video id=attr-media-loop data-dfn-type=element-attr><code>loop</code></dfn>
  attribute is a <a id=offsets-into-the-media-resource:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a> that, if specified, indicates that the <a href=#media-element id=offsets-into-the-media-resource:media-element>media
  element</a> is to seek back to the start of the <a href=#media-resource id=offsets-into-the-media-resource:media-resource-3>media resource</a> upon reaching the
  end.</p>



  <h5 id=ready-states><span class=secno>4.8.11.7</span> Ready states<a href=#ready-states class=self-link></a></h5>

  <dl class=domintro><dt><code><var>media</var>.<span id=dom-media-readystate>readyState</span></code><dd>
    <p>Returns a value that expresses the current state of the element with respect to rendering the
    <span>current playback position</span>, from the codes in the list below.</p>
   </dl>

  

  <dl><dt><dfn data-dfn-for=HTMLMediaElement id=dom-media-have_nothing data-dfn-type=const><code>HAVE_NOTHING</code></dfn> (numeric value 0)<dd><p>No information regarding the <a href=#media-resource id=ready-states:media-resource>media resource</a> is available. No data for the
   <span>current playback position</span> is available. <a href=#media-element id=ready-states:media-element>Media
   elements</a> whose <code id=ready-states:dom-media-networkstate><a href=#dom-media-networkstate>networkState</a></code> attribute are set
   to <code id=ready-states:dom-media-network_empty><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code> are always in the <code id=ready-states:dom-media-have_nothing><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> state.<dt><dfn data-dfn-for=HTMLMediaElement id=dom-media-have_metadata data-dfn-type=const><code>HAVE_METADATA</code></dfn> (numeric value 1)<dd><p>Enough of the resource has been obtained that the duration of the resource is available.
   In the case of a <code id=ready-states:the-video-element><a href=#the-video-element>video</a></code> element, the dimensions of the video are also available. No
   <a href=#media-data id=ready-states:media-data>media data</a> is available for the immediate <span>current playback
   position</span>.<dt><dfn data-dfn-for=HTMLMediaElement id=dom-media-have_current_data data-dfn-type=const><code>HAVE_CURRENT_DATA</code></dfn> (numeric value 2)<dd><p>Data for the immediate <span>current playback position</span> is available, but either not
   enough data is available that the user agent could successfully advance the <span>current
   playback position</span> in the <span>direction of playback</span> at all without immediately
   reverting to the <code id=ready-states:dom-media-have_metadata><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> state, or there is no
   more data to obtain in the <span>direction of playback</span>. For example, in video this
   corresponds to the user agent having data from the current frame, but not the next frame, when
   the <span>current playback position</span> is at the end of the current frame; and to when <span>playback has ended</span>.<dt><dfn data-dfn-for=HTMLMediaElement id=dom-media-have_future_data data-dfn-type=const><code>HAVE_FUTURE_DATA</code></dfn> (numeric value 3)<dd><p>Data for the immediate <span>current playback position</span> is available, as well as
   enough data for the user agent to advance the <span>current playback position</span> in the
   <span>direction of playback</span> at least a little without immediately reverting to the <code id=ready-states:dom-media-have_metadata-2><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> state, and <a href=#the-text-tracks-are-ready id=ready-states:the-text-tracks-are-ready>the text tracks are
   ready</a>. For example, in video this corresponds to the user agent having data for at least
   the current frame and the next frame when the <span>current playback position</span> is at the
   instant in time between the two frames, or to the user agent having the video data for the
   current frame and audio data to keep playing at least a little when the <span>current playback
   position</span> is in the middle of a frame. The user agent cannot be in this state if <span>playback has ended</span>, as the <span>current playback position</span>
   can never advance in this case.<dt><dfn data-dfn-for=HTMLMediaElement id=dom-media-have_enough_data data-dfn-type=const><code>HAVE_ENOUGH_DATA</code></dfn> (numeric value 4)<dd>
   <p>All the conditions described for the <code id=ready-states:dom-media-have_future_data><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> state are met, and, in addition,
    either of the following conditions is also true:</p>

    <ul><li>The user agent estimates that data is being fetched at a rate where the <span>current
     playback position</span>, if it were to advance at the element's <code id=ready-states:dom-media-playbackrate><a href=#dom-media-playbackrate>playbackRate</a></code>, would not overtake the available data
     before playback reaches the end of the <a href=#media-resource id=ready-states:media-resource-2>media resource</a>.<li>The user agent has entered a state where waiting longer will not result in further data
     being obtained, and therefore nothing would be gained by delaying playback any further. (For
     example, the buffer might be full.)</ul>
   </dl>

  <p class=note>In practice, the difference between <code id=ready-states:dom-media-have_metadata-3><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> and <code id=ready-states:dom-media-have_current_data><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> is negligible. Really the only time
  the difference is relevant is when painting a <code id=ready-states:the-video-element-2><a href=#the-video-element>video</a></code> element onto a
  <code id=ready-states:the-canvas-element><a href=canvas.html#the-canvas-element>canvas</a></code>, where it distinguishes the case where something will be drawn (<code id=ready-states:dom-media-have_current_data-2><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> or greater) from the case where
  nothing is drawn (<code id=ready-states:dom-media-have_metadata-4><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> or less). Similarly,
  the difference between <code id=ready-states:dom-media-have_current_data-3><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> (only
  the current frame) and <code id=ready-states:dom-media-have_future_data-2><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> (at least
  this frame and the next) can be negligible (in the extreme, only one frame). The only time that
  distinction really matters is when a page provides an interface for "frame-by-frame"
  navigation.</p>

  

  <p class=note>It is possible for the ready state of a media element to jump between these states
  discontinuously. For example, the state of a media element can jump straight from <code id=ready-states:dom-media-have_metadata-5><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> to <code id=ready-states:dom-media-have_enough_data><a href=#dom-media-have_enough_data>HAVE_ENOUGH_DATA</a></code> without passing through the <code id=ready-states:dom-media-have_current_data-4><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> and <code id=ready-states:dom-media-have_future_data-3><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> states.</p>

  

  <p>The <dfn data-dfn-for=audio,video id=attr-media-autoplay data-dfn-type=element-attr><code>autoplay</code></dfn> attribute is a <a id=ready-states:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>.
  When present, the user agent 
  will automatically begin playback of the <a href=#media-resource id=ready-states:media-resource-3>media resource</a> as soon as it can do so
  without stopping.</p>

  <p class=note>Authors are urged to use the <code id=ready-states:attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code>
  attribute rather than using script to trigger automatic playback, as this allows the user to
  override the automatic playback when it is not desired, e.g. when using a screen reader. Authors
  are also encouraged to consider not using the automatic playback behavior at all, and instead to
  let the user agent wait for the user to start playback explicitly.</p>



  <h5 id=playing-the-media-resource><span class=secno>4.8.11.8</span> Playing the media resource<a href=#playing-the-media-resource class=self-link></a></h5>

  <dl class=domintro><dt><code><var>media</var>.<span id=dom-media-paused>paused</span></code><dd><p>Returns true if playback is paused; false otherwise.<dt><code><var>media</var>.<span id=dom-media-ended>ended</span></code><dd><p>Returns true if playback has reached the end of the <a href=#media-resource id=playing-the-media-resource:media-resource>media resource</a>.<dt><code><var>media</var>.<span id=dom-media-defaultplaybackrate>defaultPlaybackRate</span> [ = <var>value</var> ]</code><dd>
    <p>Returns the default rate of playback, for when the user is not fast-forwarding or reversing
    through the <a href=#media-resource id=playing-the-media-resource:media-resource-2>media resource</a>.</p>

    <p>Can be set, to change the default rate of playback.</p>

    <p>The default rate has no direct effect on playback, but if the user switches to a fast-forward
    mode, when they return to the normal playback mode, it is expected that the rate of playback
    will be returned to the default rate of playback.</p>
   <dt><code><var>media</var>.<span id=dom-media-playbackrate>playbackRate</span> [ = <var>value</var> ]</code><dd>
    <p>Returns the current rate playback, where 1.0 is normal speed.</p>

    <p>Can be set, to change the rate of playback.</p>
   <dt><code><var>media</var>.<span id=dom-media-preservespitch>preservesPitch</span></code><dd>
    <p>Returns true if pitch-preserving algorithms are used when the <code id=playing-the-media-resource:dom-media-playbackrate><a href=#dom-media-playbackrate>playbackRate</a></code> is not 1.0. The default value is true.</p>

    <p>Can be set to false to have the <a href=#media-resource id=playing-the-media-resource:media-resource-3>media resource</a>'s audio pitch change up or down
    depending on the <code id=playing-the-media-resource:dom-media-playbackrate-2><a href=#dom-media-playbackrate>playbackRate</a></code>. This is useful for
    aesthetic and performance reasons.</p>
   <dt><code><var>media</var>.<span id=dom-media-played>played</span></code><dd>
    <p>Returns a <code>TimeRanges</code> object that represents the ranges of the <a href=#media-resource id=playing-the-media-resource:media-resource-4>media
    resource</a> that the user agent has played.</p>
   <dt><code><var>media</var>.<span id=dom-media-play>play</span>()</code><dd>
    <p>Sets the <code id=playing-the-media-resource:dom-media-paused><a href=#dom-media-paused>paused</a></code> attribute to false, loading the
    <a href=#media-resource id=playing-the-media-resource:media-resource-5>media resource</a> and beginning playback if necessary. If the playback had ended, will
    restart it from the start.</p>
   <dt><code><var>media</var>.<span id=dom-media-pause>pause</span>()</code><dd>
    <p>Sets the <code id=playing-the-media-resource:dom-media-paused-2><a href=#dom-media-paused>paused</a></code> attribute to true, loading the
    <a href=#media-resource id=playing-the-media-resource:media-resource-6>media resource</a> if necessary.</p>
   </dl>

  



  <h5 id=seeking><span class=secno>4.8.11.9</span> Seeking<a href=#seeking class=self-link></a></h5>

  <dl class=domintro><dt><code><var>media</var>.<span id=dom-media-seeking>seeking</span></code><dd><p>Returns true if the user agent is currently seeking.<dt><code><var>media</var>.<span id=dom-media-seekable>seekable</span></code><dd>
    <p>Returns a <code>TimeRanges</code> object that represents the ranges of the <a href=#media-resource id=seeking:media-resource>media
    resource</a> to which it is possible for the user agent to seek.</p>
   <dt><code><var>media</var>.<span id=dom-media-fastseek>fastSeek</span>(<var>time</var>)</code><dd>
    <p>Seeks to near the given <var>time</var> as fast as possible, trading precision for speed. (To
    seek to a precise time, use the <code id=seeking:dom-media-currenttime><a href=#dom-media-currenttime>currentTime</a></code>
    attribute.)</p>

    <p>This does nothing if the media resource has not been loaded.</p>
   </dl>

  


  <h5 id=media-resources-with-multiple-media-tracks><span class=secno>4.8.11.10</span> Media resources with multiple media tracks<a href=#media-resources-with-multiple-media-tracks class=self-link></a></h5>

  <p>A <a href=#media-resource id=media-resources-with-multiple-media-tracks:media-resource>media resource</a> can have multiple embedded audio and video tracks. For example,
  in addition to the primary video and audio tracks, a <a href=#media-resource id=media-resources-with-multiple-media-tracks:media-resource-2>media resource</a> could have
  foreign-language dubbed dialogues, director's commentaries, audio descriptions, alternative
  angles, or sign-language overlays.</p>

  <dl class=domintro><dt><code><var>media</var>.<span id=dom-media-audiotracks>audioTracks</span></code><dd>
    <p>Returns an <code>AudioTrackList</code> object representing the audio tracks available in the
    <a href=#media-resource id=media-resources-with-multiple-media-tracks:media-resource-3>media resource</a>.</p>
   <dt><code><var>media</var>.<span id=dom-media-videotracks>videoTracks</span></code><dd>
    <p>Returns a <code>VideoTrackList</code> object representing the video tracks available in the
    <a href=#media-resource id=media-resources-with-multiple-media-tracks:media-resource-4>media resource</a>.</p>
   </dl>

  


  <h6 id=audiotracklist-and-videotracklist-objects><span class=secno>4.8.11.10.1</span> <code>AudioTrackList</code> and <code>VideoTrackList</code> objects<a href=#audiotracklist-and-videotracklist-objects class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/AudioTrackList title="The AudioTrackList interface is used to represent a list of the audio tracks contained within a given HTML media element, with each track represented by a separate AudioTrack object in the list.">AudioTrackList</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList title="The VideoTrackList interface is used to represent a list of the video tracks contained within a <video> element, with each track represented by a separate VideoTrack object in the list.">VideoTrackList</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/AudioTrackList title="The AudioTrackList interface is used to represent a list of the audio tracks contained within a given HTML media element, with each track represented by a separate AudioTrack object in the list.">AudioTrackList</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span><hr><span class=caniuse><span><a href="https://caniuse.com/#feat=audiotracks" title="Audio Tracks">caniuse.com table</a></span></span></div></div></div>

  <p>The <code>AudioTrackList</code> and <code>VideoTrackList</code> interfaces are used by
  attributes defined in the previous section.</p>

  

  <dl class=domintro><dt><code><var>media</var>.<a href=#dom-media-audiotracks id=audiotracklist-and-videotracklist-objects:dom-media-audiotracks>audioTracks</a>.<span id=dom-audiotracklist-length>length</span></code><dt><code><var>media</var>.<a href=#dom-media-videotracks id=audiotracklist-and-videotracklist-objects:dom-media-videotracks>videoTracks</a>.<span id=dom-videotracklist-length>length</span></code><dd><p>Returns the number of tracks in the list.<dt><code><var>audioTrack</var> = <var>media</var>.<a href=#dom-media-audiotracks id=audiotracklist-and-videotracklist-objects:dom-media-audiotracks-2>audioTracks</a>[<var>index</var>]</code><dt><code><var>videoTrack</var> = <var>media</var>.<a href=#dom-media-videotracks id=audiotracklist-and-videotracklist-objects:dom-media-videotracks-2>videoTracks</a>[<var>index</var>]</code><dd><p>Returns the specified <code>AudioTrack</code> or <code>VideoTrack</code> object.<dt><code><var>audioTrack</var> = <var>media</var>.<a href=#dom-media-audiotracks id=audiotracklist-and-videotracklist-objects:dom-media-audiotracks-3>audioTracks</a>.<span id=dom-audiotracklist-gettrackbyid>getTrackById</span>(<var>id</var>)</code><dt><code><var>videoTrack</var> = <var>media</var>.<a href=#dom-media-videotracks id=audiotracklist-and-videotracklist-objects:dom-media-videotracks-3>videoTracks</a>.<span id=dom-videotracklist-gettrackbyid>getTrackById</span>(<var>id</var>)</code><dd>
    <p>Returns the <code>AudioTrack</code> or <code>VideoTrack</code> object with the given
    identifier, or null if no track has that identifier.</p>
   <dt><code><var>audioTrack</var>.<span id=dom-audiotrack-id>id</span></code><dt><code><var>videoTrack</var>.<span id=dom-videotrack-id>id</span></code><dd>
    <p>Returns the ID of the given track. This is the ID that can be used with a <a href=https://url.spec.whatwg.org/#concept-url-fragment id=audiotracklist-and-videotracklist-objects:concept-url-fragment data-x-internal=concept-url-fragment>fragment</a> if the format supports <a id=audiotracklist-and-videotracklist-objects:media-fragment-syntax href=https://www.w3.org/TR/media-frags/#media-fragment-syntax data-x-internal=media-fragment-syntax>media fragment
    syntax</a>, and that can be used with the <code>getTrackById()</code> method.</p>
   <dt><code><var>audioTrack</var>.<span id=dom-audiotrack-kind>kind</span></code><dt><code><var>videoTrack</var>.<span id=dom-videotrack-kind>kind</span></code><dd><p>Returns the category the given track falls into. The <a href=#dom-TrackList-getKind-categories>possible track categories</a> are given below.<dt><code><var>audioTrack</var>.<span id=dom-audiotrack-label>label</span></code><dt><code><var>videoTrack</var>.<span id=dom-videotrack-label>label</span></code><dd><p>Returns the label of the given track, if known, or the empty string otherwise.<dt><code><var>audioTrack</var>.<span id=dom-audiotrack-language>language</span></code><dt><code><var>videoTrack</var>.<span id=dom-videotrack-language>language</span></code><dd><p>Returns the language of the given track, if known, or the empty string otherwise.<dt><code><var>audioTrack</var>.<span id=dom-audiotrack-enabled>enabled</span> [ = <var>value</var> ]</code><dd>
    <p>Returns true if the given track is active, and false otherwise.</p>

    <p>Can be set, to change whether the track is enabled or not. If multiple audio tracks are
    enabled simultaneously, they are mixed.</p>
   <dt><code><var>media</var>.<a href=#dom-media-videotracks id=audiotracklist-and-videotracklist-objects:dom-media-videotracks-4>videoTracks</a>.<span id=dom-videotracklist-selectedindex>selectedIndex</span></code><dd><p>Returns the index of the currently selected track, if any, or −1
   otherwise.<dt><code><var>videoTrack</var>.<span id=dom-videotrack-selected>selected</span> [ = <var>value</var> ]</code><dd>
    <p>Returns true if the given track is active, and false otherwise.</p>

    <p>Can be set, to change whether the track is selected or not. Either zero or one video track is
    selected; selecting a new track while a previous one is selected will unselect the previous
    one.</p>
   </dl>

  

  <table id=dom-TrackList-getKind-categories><caption>Return values for <code>AudioTrack</code>'s <code id=audiotracklist-and-videotracklist-objects:dom-audiotrack-kind><a href=#dom-audiotrack-kind>kind</a></code> and <code>VideoTrack</code>'s <code id=audiotracklist-and-videotracklist-objects:dom-videotrack-kind><a href=#dom-videotrack-kind>kind</a></code></caption><thead><tr><th>Category
     <th>Definition
     <th>Applies to...<th>Examples
   <tbody><tr><td>"<dfn id=value-track-kind-alternate><code>alternative</code></dfn>"
     <td>A possible alternative to the main track, e.g. a different take of a song (audio), or a different angle (video).
     <td>Audio and video.
     <td>Ogg: "audio/alternate" or "video/alternate"; DASH: "alternate" without "main" and "commentary" roles, and, for audio, without the "dub" role (other roles ignored).

    <tr><td>"<dfn id=value-track-kind-caption><code>captions</code></dfn>"
     <td>A version of the main video track with captions burnt in. (For legacy content; new content would use text tracks.)
     <td>Video only.
     <td>DASH: "caption" and "main" roles together (other roles ignored).

    <tr><td>"<dfn id=value-track-kind-descriptions><code>descriptions</code></dfn>"
     <td>An audio description of a video track.
     <td>Audio only.
     <td>Ogg: "audio/audiodesc".

    <tr><td>"<dfn id=value-track-kind-main><code>main</code></dfn>"
     <td>The primary audio or video track.
     <td>Audio and video.
     <td>Ogg: "audio/main" or "video/main"; WebM: the "FlagDefault" element is set; DASH: "main" role without "caption", "subtitle", and "dub" roles (other roles ignored).

    <tr><td>"<dfn id=value-track-kind-main-desc><code>main-desc</code></dfn>"
     <td>The primary audio track, mixed with audio descriptions.
     <td>Audio only.
     <td>AC3 audio in MPEG-2 TS: bsmod=2 and full_svc=1. 

    <tr><td>"<dfn id=value-track-kind-sign><code>sign</code></dfn>"
     <td>A sign-language interpretation of an audio track.
     <td>Video only.
     <td>Ogg: "video/sign".

    <tr><td>"<dfn id=value-track-kind-subtitle><code>subtitles</code></dfn>"
     <td>A version of the main video track with subtitles burnt in. (For legacy content; new content would use text tracks.)
     <td>Video only.
     <td>DASH: "subtitle" and "main" roles together (other roles ignored).

    <tr><td>"<dfn id=value-track-kind-translation><code>translation</code></dfn>"
     <td>A translated version of the main audio track.
     <td>Audio only.
     <td>Ogg: "audio/dub". DASH: "dub" and "main" roles together (other roles ignored).

    <tr><td>"<dfn id=value-track-kind-commentary><code>commentary</code></dfn>"
     <td>Commentary on the primary audio or video track, e.g. a director's commentary.
     <td>Audio and video.
     <td>DASH: "commentary" role without "main" role (other roles ignored).

    <tr><td>"<dfn id=value-track-kind-none><code></code></dfn>" (empty string)
     <td>No explicit kind, or the kind given by the track's metadata is not recognized by the user agent.
     <td>Audio and video.
     <td>

  </table>

  


  <h6 id=selecting-specific-audio-and-video-tracks-declaratively><span class=secno>4.8.11.10.2</span> Selecting specific audio and video tracks declaratively<a href=#selecting-specific-audio-and-video-tracks-declaratively class=self-link></a></h6>

  <p>The <code id=selecting-specific-audio-and-video-tracks-declaratively:dom-media-audiotracks><a href=#dom-media-audiotracks>audioTracks</a></code> and <code id=selecting-specific-audio-and-video-tracks-declaratively:dom-media-videotracks><a href=#dom-media-videotracks>videoTracks</a></code> attributes allow scripts to select which track
  should play, but it is also possible to select specific tracks declaratively, by specifying
  particular tracks in the <a href=https://url.spec.whatwg.org/#concept-url-fragment id=selecting-specific-audio-and-video-tracks-declaratively:concept-url-fragment data-x-internal=concept-url-fragment>fragment</a> of the
  <a id=selecting-specific-audio-and-video-tracks-declaratively:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of the <a href=#media-resource id=selecting-specific-audio-and-video-tracks-declaratively:media-resource>media resource</a>. The format of the <a href=https://url.spec.whatwg.org/#concept-url-fragment id=selecting-specific-audio-and-video-tracks-declaratively:concept-url-fragment-2 data-x-internal=concept-url-fragment>fragment</a> depends on the <a id=selecting-specific-audio-and-video-tracks-declaratively:mime-type href=https://mimesniff.spec.whatwg.org/#mime-type data-x-internal=mime-type>MIME type</a> of the
  <a href=#media-resource id=selecting-specific-audio-and-video-tracks-declaratively:media-resource-2>media resource</a>. <a href=references.html#refsRFC2046>[RFC2046]</a> <a href=references.html#refsURL>[URL]</a></p>

  <div class=example>

   <p>In this example, a video that uses a format that supports <a id=selecting-specific-audio-and-video-tracks-declaratively:media-fragment-syntax href=https://www.w3.org/TR/media-frags/#media-fragment-syntax data-x-internal=media-fragment-syntax>media fragment syntax</a>
   is embedded in such a way that the alternative angles labeled "Alternative" are enabled instead
   of the default video track.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>video</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;myvideo#track=Alternative&quot;</c-><c- p>&gt;&lt;/</c-><c- f>video</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h5 id=timed-text-tracks><span class=secno>4.8.11.11</span> Timed text tracks<a href=#timed-text-tracks class=self-link></a></h5>

  <h6 id=text-track-model><span class=secno>4.8.11.11.1</span> Text track model<a href=#text-track-model class=self-link></a></h6>

  <p>A <a href=#media-element id=text-track-model:media-element>media element</a> can have a group of associated <dfn id=text-track>text
  tracks</dfn>, known as the <a href=#media-element id=text-track-model:media-element-2>media element</a>'s <dfn id=list-of-text-tracks>list of text tracks</dfn>. The <a href=#text-track id=text-track-model:text-track>text tracks</a> are sorted as follows:</p>

  <ol><li><p>The <a href=#text-track id=text-track-model:text-track-2>text tracks</a> corresponding to <code id=text-track-model:the-track-element><a href=#the-track-element>track</a></code>
   element children of the <a href=#media-element id=text-track-model:media-element-3>media element</a>, in <a id=text-track-model:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>.<li><p>Any <a href=#text-track id=text-track-model:text-track-3>text tracks</a> added using the <code id=text-track-model:dom-media-addtexttrack><a href=#dom-media-addtexttrack>addTextTrack()</a></code> method, in the order they were added,
   oldest first.<li><p>Any <a href=#media-resource-specific-text-track id=text-track-model:media-resource-specific-text-track>media-resource-specific text
   tracks</a> (<a href=#text-track id=text-track-model:text-track-4>text tracks</a> corresponding to data in the
   <a href=#media-resource id=text-track-model:media-resource>media resource</a>), in the order defined by the <a href=#media-resource id=text-track-model:media-resource-2>media resource</a>'s format
   specification.</ol>

  <p>A <a href=#text-track id=text-track-model:text-track-5>text track</a> consists of:</p>

  <dl><dt><dfn id=text-track-kind>The kind of text track</dfn>

   <dd>
    <p>This decides how the track is handled by the user agent. The kind is represented by a string.
    The possible strings are:</p>

    <ul class=brief><li><dfn id=dom-texttrack-kind-subtitles><code>subtitles</code></dfn>
     <li><dfn id=dom-texttrack-kind-captions><code>captions</code></dfn>
     <li><dfn id=dom-texttrack-kind-descriptions><code>descriptions</code></dfn>
     <li><dfn id=dom-texttrack-kind-chapters><code>chapters</code></dfn>
     <li><dfn id=dom-texttrack-kind-metadata><code>metadata</code></dfn>
    </ul>

    <p>The <a href=#text-track-kind id=text-track-model:text-track-kind>kind of track</a> can change dynamically, in the case of
    a <a href=#text-track id=text-track-model:text-track-6>text track</a> corresponding to a <code id=text-track-model:the-track-element-2><a href=#the-track-element>track</a></code> element.</p>
   <dt><dfn id=text-track-label>A label</dfn>

   <dd>
    <p>This is a human-readable string intended to identify the track for the user.</p>

    <p>The <a href=#text-track-label id=text-track-model:text-track-label>label of a track</a> can change dynamically, in the
    case of a <a href=#text-track id=text-track-model:text-track-7>text track</a> corresponding to a <code id=text-track-model:the-track-element-3><a href=#the-track-element>track</a></code> element.</p>

    <p>When a <a href=#text-track-label id=text-track-model:text-track-label-2>text track label</a> is the empty string, the user agent should automatically
    generate an appropriate label from the text track's other properties (e.g. the kind of text
    track and the text track's language) for use in its user interface. This automatically-generated
    label is not exposed in the API.</p>
   <dt><dfn id=text-track-in-band-metadata-track-dispatch-type>An in-band metadata track dispatch type</dfn>

   <dd>
    <p>This is a string extracted from the <a href=#media-resource id=text-track-model:media-resource-3>media resource</a> specifically for in-band
    metadata tracks to enable such tracks to be dispatched to different scripts in the document.</p>

    <p class=example>For example, a traditional TV station broadcast streamed on the web and
    augmented with web-specific interactive features could include text tracks with metadata for ad
    targeting, trivia game data during game shows, player states during sports games, recipe
    information during food programs, and so forth. As each program starts and ends, new tracks
    might be added or removed from the stream, and as each one is added, the user agent could bind
    them to dedicated script modules using the value of this attribute.</p>

    <p>Other than for in-band metadata text tracks, the <a href=#text-track-in-band-metadata-track-dispatch-type id=text-track-model:text-track-in-band-metadata-track-dispatch-type>in-band metadata track dispatch type</a> is the empty string. How this
    value is populated for different media formats is described in <span>steps to expose a
    media-resource-specific text track</span>.</p>
   <dt><dfn id=text-track-language>A language</dfn>

   <dd>
    <p>This is a string (a BCP 47 language tag) representing the language of the text track's cues.
    <a href=references.html#refsBCP47>[BCP47]</a></p>

    <p>The <a href=#text-track-language id=text-track-model:text-track-language>language of a text track</a> can change dynamically,
    in the case of a <a href=#text-track id=text-track-model:text-track-8>text track</a> corresponding to a <code id=text-track-model:the-track-element-4><a href=#the-track-element>track</a></code> element.</p>
   <dt><dfn id=text-track-readiness-state>A readiness state</dfn>

   <dd>
    <p>One of the following:</p>

    <dl><dt><dfn id=text-track-not-loaded>Not loaded</dfn>

     <dd>
      <p>Indicates that the text track's cues have not been obtained.</p>
     <dt><dfn id=text-track-loading>Loading</dfn>

     <dd>
      <p>Indicates that the text track is loading and there have been no fatal errors encountered so
      far. Further cues might still be added to the track by the parser.</p>
     <dt><dfn id=text-track-loaded>Loaded</dfn>

     <dd>
      <p>Indicates that the text track has been loaded with no fatal errors.</p>
     <dt><dfn id=text-track-failed-to-load>Failed to load</dfn>

     <dd>
      <p>Indicates that the text track was enabled, but when the user agent attempted to obtain it,
      this failed in some way (e.g., <a id=text-track-model:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> could not be <span>parsed</span>, network error, unknown text track format). Some or all of the cues are
      likely missing and will not be obtained.</p>
     </dl>

    <p>The <a href=#text-track-readiness-state id=text-track-model:text-track-readiness-state>readiness state</a> of a <a href=#text-track id=text-track-model:text-track-9>text
    track</a> changes dynamically as the track is obtained.</p>
   <dt><dfn id=text-track-mode>A mode</dfn>

   <dd>
    <p>One of the following:</p>

    <dl><dt><dfn id=text-track-disabled>Disabled</dfn>

     <dd>
      <p>Indicates that the text track is not active. Other than for the purposes of exposing the
      track in the DOM, the user agent is ignoring the text track. No cues are active, no events are
      fired, and the user agent will not attempt to obtain the track's cues.</p>
     <dt><dfn id=text-track-hidden>Hidden</dfn>

     <dd>
      <p>Indicates that the text track is active, but that the user agent is not actively displaying
      the cues. If no attempt has yet been made to obtain the track's cues, the user agent will
      perform such an attempt momentarily. The user agent is maintaining a list of which cues are
      active, and events are being fired accordingly.</p>
     <dt><dfn id=text-track-showing>Showing</dfn>

     <dd>
      <p>Indicates that the text track is active. If no attempt has yet been made to obtain the
      track's cues, the user agent will perform such an attempt momentarily. The user agent is
      maintaining a list of which cues are active, and events are being fired accordingly. In
      addition, for text tracks whose <a href=#text-track-kind id=text-track-model:text-track-kind-2>kind</a> is <code id=text-track-model:dom-texttrack-kind-subtitles><a href=#dom-texttrack-kind-subtitles>subtitles</a></code> or <code id=text-track-model:dom-texttrack-kind-captions><a href=#dom-texttrack-kind-captions>captions</a></code>, the cues are being overlaid on the video
      as appropriate; for text tracks whose <a href=#text-track-kind id=text-track-model:text-track-kind-3>kind</a> is <code id=text-track-model:dom-texttrack-kind-descriptions><a href=#dom-texttrack-kind-descriptions>descriptions</a></code>, the user agent is making the
      cues available to the user in a non-visual fashion; and for text tracks whose <a href=#text-track-kind id=text-track-model:text-track-kind-4>kind</a> is <code id=text-track-model:dom-texttrack-kind-chapters><a href=#dom-texttrack-kind-chapters>chapters</a></code>, the user agent is making available to
      the user a mechanism by which the user can navigate to any point in the <a href=#media-resource id=text-track-model:media-resource-4>media
      resource</a> by selecting a cue.</p>
     </dl>
   <dt><dfn id=text-track-list-of-cues>A list of zero or more cues</dfn>

   <dd>
    <p>A list of <a href=#text-track-cue id=text-track-model:text-track-cue>text track cues</a>, along with <dfn id=rules-for-updating-the-text-track-rendering>rules for
    updating the text track rendering</dfn>. For example, for WebVTT, the <a id=text-track-model:rules-for-updating-the-display-of-webvtt-text-tracks href=https://w3c.github.io/webvtt/#rules-for-updating-the-display-of-webvtt-text-tracks data-x-internal=rules-for-updating-the-display-of-webvtt-text-tracks>rules for updating
    the display of WebVTT text tracks</a>. <a href=references.html#refsWEBVTT>[WEBVTT]</a> </p>

    <p>The <a href=#text-track-list-of-cues id=text-track-model:text-track-list-of-cues>list of cues of a text track</a> can change
    dynamically, either because the <a href=#text-track id=text-track-model:text-track-10>text track</a> has <a href=#text-track-not-loaded id=text-track-model:text-track-not-loaded>not yet been loaded</a> or is still <a href=#text-track-loading id=text-track-model:text-track-loading>loading</a>,
    or due to DOM manipulation.</p>
   </dl>

  <p>Each <a href=#text-track id=text-track-model:text-track-11>text track</a> has a corresponding <code>TextTrack</code> object.</p>

  <hr>

  <p>Each <a href=#media-element id=text-track-model:media-element-4>media element</a> has a <dfn id=list-of-pending-text-tracks>list of pending text tracks</dfn>, which must
  initially be empty, a <dfn id=blocked-on-parser>blocked-on-parser</dfn> flag, which must initially be false, and a
  <dfn id=did-perform-automatic-track-selection>did-perform-automatic-track-selection</dfn> flag, which must also initially be false.</p>

  <p>When the user agent is required to <dfn id=populate-the-list-of-pending-text-tracks>populate the list of pending text tracks</dfn> of a
  <a href=#media-element id=text-track-model:media-element-5>media element</a>, the user agent must add to the element's <a href=#list-of-pending-text-tracks id=text-track-model:list-of-pending-text-tracks>list of pending text
  tracks</a> each <a href=#text-track id=text-track-model:text-track-12>text track</a> in the element's <a href=#list-of-text-tracks id=text-track-model:list-of-text-tracks>list of text tracks</a> whose
  <a href=#text-track-mode id=text-track-model:text-track-mode>text track mode</a> is not <a href=#text-track-disabled id=text-track-model:text-track-disabled>disabled</a> and whose
  <a href=#text-track-readiness-state id=text-track-model:text-track-readiness-state-2>text track readiness state</a> is  <a href=#text-track-loading id=text-track-model:text-track-loading-2>loading</a>.</p>

  <p>Whenever a <code id=text-track-model:the-track-element-5><a href=#the-track-element>track</a></code> element's parent node changes, the user agent must remove the
  corresponding <a href=#text-track id=text-track-model:text-track-13>text track</a> from any <a href=#list-of-pending-text-tracks id=text-track-model:list-of-pending-text-tracks-2>list of pending text tracks</a> that it is
  in.</p>

  <p>Whenever a <a href=#text-track id=text-track-model:text-track-14>text track</a>'s <a href=#text-track-readiness-state id=text-track-model:text-track-readiness-state-3>text track readiness state</a> changes to either
  <a href=#text-track-loaded id=text-track-model:text-track-loaded>loaded</a> or <a href=#text-track-failed-to-load id=text-track-model:text-track-failed-to-load>failed to
  load</a>, the user agent must remove it from any <a href=#list-of-pending-text-tracks id=text-track-model:list-of-pending-text-tracks-3>list of pending text tracks</a> that
  it is in.</p>

  <p>When a <a href=#media-element id=text-track-model:media-element-6>media element</a> is created by an <span>HTML parser</span> or <span>XML
  parser</span>, the user agent must set the element's <a href=#blocked-on-parser id=text-track-model:blocked-on-parser>blocked-on-parser</a> flag to true.
  When a <a href=#media-element id=text-track-model:media-element-7>media element</a> is popped off the <span>stack of open elements</span> of an
  <span>HTML parser</span> or <span>XML parser</span>, the user agent must <span>honor user
  preferences for automatic text track selection</span>, <a href=#populate-the-list-of-pending-text-tracks id=text-track-model:populate-the-list-of-pending-text-tracks>populate the list of pending text
  tracks</a>, and set the element's <a href=#blocked-on-parser id=text-track-model:blocked-on-parser-2>blocked-on-parser</a> flag to false.</p>

  <p>The <a href=#text-track id=text-track-model:text-track-15>text tracks</a> of a <a href=#media-element id=text-track-model:media-element-8>media element</a> are <dfn id=the-text-tracks-are-ready>ready</dfn> when both the element's <a href=#list-of-pending-text-tracks id=text-track-model:list-of-pending-text-tracks-4>list of pending text
  tracks</a> is empty and the element's <a href=#blocked-on-parser id=text-track-model:blocked-on-parser-3>blocked-on-parser</a> flag is false.</p>

  <p>Each <a href=#media-element id=text-track-model:media-element-9>media element</a> has a <dfn id=pending-text-track-change-notification-flag>pending text track change notification flag</dfn>,
  which must initially be unset.</p>

  <p>Whenever a <a href=#text-track id=text-track-model:text-track-16>text track</a> that is in a <a href=#media-element id=text-track-model:media-element-10>media element</a>'s <a href=#list-of-text-tracks id=text-track-model:list-of-text-tracks-2>list of text
  tracks</a> has its <a href=#text-track-mode id=text-track-model:text-track-mode-2>text track mode</a> change value, the user agent must run the
  following steps for the <a href=#media-element id=text-track-model:media-element-11>media element</a>:</p>

  <ol><li><p>If the <a href=#media-element id=text-track-model:media-element-12>media element</a>'s <a href=#pending-text-track-change-notification-flag id=text-track-model:pending-text-track-change-notification-flag>pending text track change notification
   flag</a> is set, return.<li><p>Set the <a href=#media-element id=text-track-model:media-element-13>media element</a>'s <a href=#pending-text-track-change-notification-flag id=text-track-model:pending-text-track-change-notification-flag-2>pending text track change notification
   flag</a>.<li>
    <p><span>Queue a media element task</span> given the <a href=#media-element id=text-track-model:media-element-14>media element</a> to run these
    steps:</p>

    <ol><li><p>Unset the <a href=#media-element id=text-track-model:media-element-15>media element</a>'s <a href=#pending-text-track-change-notification-flag id=text-track-model:pending-text-track-change-notification-flag-3>pending text track change notification
     flag</a>.<li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=text-track-model:concept-event-fire data-x-internal=concept-event-fire>Fire an event</a> named <code id=text-track-model:event-media-change><a href=#event-media-change>change</a></code> at the <a href=#media-element id=text-track-model:media-element-16>media element</a>'s <code id=text-track-model:dom-media-texttracks><a href=#dom-media-texttracks>textTracks</a></code> attribute's <code>TextTrackList</code>
     object.</ol>
   <li><p>If the <a href=#media-element id=text-track-model:media-element-17>media element</a>'s <span>show poster flag</span> is not set, run the
   <i>time marches on</i> steps.</ol>

  <p>The <span>task source</span> for the <span>tasks</span> listed in this
  section is the <span>DOM manipulation task source</span>.</p>

  <hr>

  <p>A <dfn id=text-track-cue>text track cue</dfn> is the unit of time-sensitive data in a <a href=#text-track id=text-track-model:text-track-17>text track</a>,
  corresponding for instance for subtitles and captions to the text that appears at a particular
  time and disappears at another time.</p>

  <p>Each <a href=#text-track-cue id=text-track-model:text-track-cue-2>text track cue</a> consists of:</p>

  <dl><dt><dfn id=text-track-cue-identifier>An identifier</dfn>
   <dd>
    <p>An arbitrary string.</p>
   <dt><dfn id=text-track-cue-start-time>A start time</dfn>
   <dd>
    <p>The time, in seconds and fractions of a second, that describes the beginning of the range of
    the <a href=#media-data id=text-track-model:media-data>media data</a> to which the cue applies.</p>
   <dt><dfn id=text-track-cue-end-time>An end time</dfn>
   <dd>
    <p>The time, in seconds and fractions of a second, that describes the end of the range of the
    <a href=#media-data id=text-track-model:media-data-2>media data</a> to which the cue applies, or positive Infinity for an <a href=#unbounded-text-track-cue id=text-track-model:unbounded-text-track-cue>unbounded
    text track cue</a>.</p>
   <dt><dfn id=text-track-cue-pause-on-exit-flag>A pause-on-exit flag</dfn>
   <dd>
    <p>A boolean indicating whether playback of the <a href=#media-resource id=text-track-model:media-resource-5>media resource</a> is to pause when the
    end of the range to which the cue applies is reached.</p>
   <dt>Some additional format-specific data<dd>
    <p>Additional fields, as needed for the format, including the actual data of the cue. For
    example, WebVTT has a <a id=text-track-model:text-track-cue-writing-direction href=https://w3c.github.io/webvtt/#webvtt-cue-writing-direction data-x-internal=text-track-cue-writing-direction>text track cue writing direction</a> and so forth.
    <a href=references.html#refsWEBVTT>[WEBVTT]</a></p>
   </dl>

  <p>An <dfn id=unbounded-text-track-cue>unbounded text track cue</dfn> is a text track cue
  with a <a href=#text-track-cue-end-time id=text-track-model:text-track-cue-end-time>text track cue end time</a> set to positive Infinity. An active <a href=#unbounded-text-track-cue id=text-track-model:unbounded-text-track-cue-2>unbounded
  text track cue</a> cannot become inactive through the usual monotonic increase of the
  <span>current playback position</span> during normal playback (e.g. a metadata cue for a chapter in a live
  event with no announced end time.)</p>

  <p class=note>The <a href=#text-track-cue-start-time id=text-track-model:text-track-cue-start-time>text track cue start time</a> and <a href=#text-track-cue-end-time id=text-track-model:text-track-cue-end-time-2>text track cue end
  time</a> can be negative. (The <span>current playback position</span> can never be negative,
  though, so cues entirely before time zero cannot be active.)</p>

  <p>Each <a href=#text-track-cue id=text-track-model:text-track-cue-3>text track cue</a> has a corresponding <code>TextTrackCue</code> object (or more
  specifically, an object that inherits from <code>TextTrackCue</code> — for example, WebVTT
  cues use the <code id=text-track-model:vttcue><a data-x-internal=vttcue href=https://w3c.github.io/webvtt/#vttcue>VTTCue</a></code> interface). A <a href=#text-track-cue id=text-track-model:text-track-cue-4>text track cue</a>'s in-memory
  representation can be dynamically changed through this <code>TextTrackCue</code> API.
  <a href=references.html#refsWEBVTT>[WEBVTT]</a></p>

  <p>A <a href=#text-track-cue id=text-track-model:text-track-cue-5>text track cue</a> is associated with <a href=#rules-for-updating-the-text-track-rendering id=text-track-model:rules-for-updating-the-text-track-rendering>rules for updating the text track
  rendering</a>, as defined by the specification for the specific kind of <a href=#text-track-cue id=text-track-model:text-track-cue-6>text track
  cue</a>. These rules are used specifically when the object representing the cue is added to a
  <code>TextTrack</code> object using the <code id=text-track-model:dom-texttrack-addcue><a href=#dom-texttrack-addcue>addCue()</a></code>
  method.</p>

  <p>In addition, each <a href=#text-track-cue id=text-track-model:text-track-cue-7>text track cue</a> has two pieces of dynamic information:</p>

  <dl><dt>The <dfn id=text-track-cue-active-flag>active flag</dfn>
   <dd>
    <p>This flag must be initially unset. The flag is used to ensure events are fired appropriately
    when the cue becomes active or inactive, and to make sure the right cues are rendered.</p>

    <p>The user agent must synchronously unset this flag whenever the <a href=#text-track-cue id=text-track-model:text-track-cue-8>text track cue</a> is
    removed from its <a href=#text-track id=text-track-model:text-track-18>text track</a>'s <a href=#text-track-list-of-cues id=text-track-model:text-track-list-of-cues-2>text track list of cues</a>; whenever the
    <a href=#text-track id=text-track-model:text-track-19>text track</a> itself is removed from its <a href=#media-element id=text-track-model:media-element-18>media element</a>'s <a href=#list-of-text-tracks id=text-track-model:list-of-text-tracks-3>list of
    text tracks</a> or has its <a href=#text-track-mode id=text-track-model:text-track-mode-3>text track mode</a> changed to <a href=#text-track-disabled id=text-track-model:text-track-disabled-2>disabled</a>; and whenever the <a href=#media-element id=text-track-model:media-element-19>media element</a>'s <code id=text-track-model:dom-media-readystate><a href=#dom-media-readystate>readyState</a></code> is changed back to <code id=text-track-model:dom-media-have_nothing><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>. When the flag is unset in this way for one
    or more cues in <a href=#text-track id=text-track-model:text-track-20>text tracks</a> that were <a href=#text-track-showing id=text-track-model:text-track-showing>showing</a> prior to the relevant incident, the user agent must, after having unset
    the flag for all the affected cues, apply the <a href=#rules-for-updating-the-text-track-rendering id=text-track-model:rules-for-updating-the-text-track-rendering-2>rules for updating the text track
    rendering</a> of those <a href=#text-track id=text-track-model:text-track-21>text tracks</a>. For example, for <a href=#text-track id=text-track-model:text-track-22>text tracks</a> based on WebVTT, the <a id=text-track-model:rules-for-updating-the-display-of-webvtt-text-tracks-2 href=https://w3c.github.io/webvtt/#rules-for-updating-the-display-of-webvtt-text-tracks data-x-internal=rules-for-updating-the-display-of-webvtt-text-tracks>rules for updating the display
    of WebVTT text tracks</a>. <a href=references.html#refsWEBVTT>[WEBVTT]</a></p> <dt>The <dfn id=text-track-cue-display-state>display state</dfn>
   <dd>
    <p>This is used as part of the rendering model, to keep cues in a consistent position. It must
    initially be empty. Whenever the <a href=#text-track-cue-active-flag id=text-track-model:text-track-cue-active-flag>text track cue active flag</a> is unset, the user
    agent must empty the <a href=#text-track-cue-display-state id=text-track-model:text-track-cue-display-state>text track cue display state</a>.</p>
   </dl>

  <p>The <a href=#text-track-cue id=text-track-model:text-track-cue-9>text track cues</a> of a <a href=#media-element id=text-track-model:media-element-20>media element</a>'s
  <a href=#text-track id=text-track-model:text-track-23>text tracks</a> are ordered relative to each other in the <dfn id=text-track-cue-order>text
  track cue order</dfn>, which is determined as follows: first group the <a href=#text-track-cue id=text-track-model:text-track-cue-10>cues</a> by their <a href=#text-track id=text-track-model:text-track-24>text track</a>, with the groups being sorted in the same order
  as their <a href=#text-track id=text-track-model:text-track-25>text tracks</a> appear in the <a href=#media-element id=text-track-model:media-element-21>media element</a>'s
  <a href=#list-of-text-tracks id=text-track-model:list-of-text-tracks-4>list of text tracks</a>; then, within each group, <a href=#text-track-cue id=text-track-model:text-track-cue-11>cues</a> must be sorted by their <a href=#text-track-cue-start-time id=text-track-model:text-track-cue-start-time-2>start
  time</a>, earliest first; then, any <a href=#text-track-cue id=text-track-model:text-track-cue-12>cues</a> with the same
  <a href=#text-track-cue-start-time id=text-track-model:text-track-cue-start-time-3>start time</a> must be sorted by their <a href=#text-track-cue-end-time id=text-track-model:text-track-cue-end-time-3>end time</a>, latest first; and finally, any <a href=#text-track-cue id=text-track-model:text-track-cue-13>cues</a> with identical <a href=#text-track-cue-end-time id=text-track-model:text-track-cue-end-time-4>end
  times</a> must be sorted in the order they were last added to their respective <a href=#text-track-list-of-cues id=text-track-model:text-track-list-of-cues-3>text track
  list of cues</a>, oldest first (so e.g. for cues from a WebVTT file, that would initially be
  the order in which the cues were listed in the file). <a href=references.html#refsWEBVTT>[WEBVTT]</a></p>


  <h6 id=sourcing-in-band-text-tracks><span class=secno>4.8.11.11.2</span> Sourcing in-band text tracks<a href=#sourcing-in-band-text-tracks class=self-link></a></h6>

  <p>A <dfn id=media-resource-specific-text-track>media-resource-specific text track</dfn> is a <a href=#text-track id=sourcing-in-band-text-tracks:text-track>text track</a> that corresponds
  to data found in the <a href=#media-resource id=sourcing-in-band-text-tracks:media-resource>media resource</a>.</p>


  



  


  


  <h6 id=text-track-api><span class=secno>4.8.11.11.3</span> Text track API<a href=#text-track-api class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackList title="The TextTrackList interface is used to represent a list of the text tracks defined by the <track> element, with each track represented by a separate textTrack object in the list.">TextTrackList</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  

  <dl class=domintro><dt><code><var>media</var>.<span id=dom-media-texttracks>textTracks</span>.<span>length</span></code><dd>
    <p>Returns the number of <a href=#text-track id=text-track-api:text-track>text tracks</a> associated with the
    <a href=#media-element id=text-track-api:media-element>media element</a> (e.g. from <code id=text-track-api:the-track-element><a href=#the-track-element>track</a></code> elements). This is the number of <a href=#text-track id=text-track-api:text-track-2>text tracks</a> in the <a href=#media-element id=text-track-api:media-element-2>media element</a>'s <a href=#list-of-text-tracks id=text-track-api:list-of-text-tracks>list of text
    tracks</a>.</p>
   <dt><code><var>media</var>.<a href=#dom-media-texttracks id=text-track-api:dom-media-texttracks>textTracks[</a> <var>n</var> <span>]</span></code><dd>
    <p>Returns the <code>TextTrack</code> object representing the <var>n</var>th <a href=#text-track id=text-track-api:text-track-3>text
    track</a> in the <a href=#media-element id=text-track-api:media-element-3>media element</a>'s <a href=#list-of-text-tracks id=text-track-api:list-of-text-tracks-2>list of text tracks</a>.</p>
   <dt><code><var>textTrack</var> = <var>media</var>.<a href=#dom-media-texttracks id=text-track-api:dom-media-texttracks-2>textTracks</a>.<span id=dom-texttracklist-gettrackbyid>getTrackById</span>(<var>id</var>)</code><dd>
    <p>Returns the <code>TextTrack</code> object with the given identifier, or null if no track has
    that identifier.</p>
   </dl>

  

  <hr>

  

  <dl class=domintro><dt><code><var>textTrack</var> = <var>media</var>.<span id=dom-media-addtexttrack>addTextTrack</span>(<var>kind</var> [, <var>label</var> [, <var>language</var> ] ])</code><dd>
    <p>Creates and returns a new <code>TextTrack</code> object, which is also added to the
    <a href=#media-element id=text-track-api:media-element-4>media element</a>'s <a href=#list-of-text-tracks id=text-track-api:list-of-text-tracks-3>list of text tracks</a>.</p>
   <dt><code><var>textTrack</var>.<span id=dom-texttrack-kind>kind</span></code><dd><p>Returns the <a href=#text-track-kind id=text-track-api:text-track-kind>text track kind</a> string.<dt><code><var>textTrack</var>.<span id=dom-texttrack-label>label</span></code><dd>
    <p>Returns the <a href=#text-track-label id=text-track-api:text-track-label>text track label</a>, if there is one, or the empty string otherwise
    (indicating that a custom label probably needs to be generated from the other attributes of the
    object if the object is exposed to the user).</p>
   <dt><code><var>textTrack</var>.<span id=dom-texttrack-language>language</span></code><dd><p>Returns the <a href=#text-track-language id=text-track-api:text-track-language>text track language</a> string.<dt><code><var>textTrack</var>.<span id=dom-texttrack-id>id</span></code><dd>
    <p>Returns the ID of the given track.</p>

    <p>For in-band tracks, this is the ID that can be used with a <a href=https://url.spec.whatwg.org/#concept-url-fragment id=text-track-api:concept-url-fragment data-x-internal=concept-url-fragment>fragment</a> if the format supports <a id=text-track-api:media-fragment-syntax href=https://www.w3.org/TR/media-frags/#media-fragment-syntax data-x-internal=media-fragment-syntax>media fragment
    syntax</a>, and that can be used with the <code id=text-track-api:dom-texttracklist-gettrackbyid><a href=#dom-texttracklist-gettrackbyid>getTrackById()</a></code> method.</p>

    <p>For <code>TextTrack</code> objects corresponding to <code id=text-track-api:the-track-element-2><a href=#the-track-element>track</a></code> elements, this is the
    ID of the <code id=text-track-api:the-track-element-3><a href=#the-track-element>track</a></code> element.</p>
   <dt><code><var>textTrack</var>.<span id=dom-texttrack-inbandmetadatatrackdispatchtype>inBandMetadataTrackDispatchType</span></code><dd><p>Returns the <a href=#text-track-in-band-metadata-track-dispatch-type id=text-track-api:text-track-in-band-metadata-track-dispatch-type>text track in-band metadata track dispatch type</a> string.<dt><code><var>textTrack</var>.<span id=dom-texttrack-mode>mode</span> [ = <var>value</var> ]</code><dd>
    <p>Returns the <a href=#text-track-mode id=text-track-api:text-track-mode>text track mode</a>, represented by a string from the following
    list:</p>

    <dl><dt>"<code>disabled</code>"<dd><p>The <a href=#text-track-disabled id=text-track-api:text-track-disabled>text track disabled</a> mode.<dt>"<code>hidden</code>"<dd><p>The <a href=#text-track-hidden id=text-track-api:text-track-hidden>text track hidden</a> mode.<dt>"<code>showing</code>"<dd><p>The <a href=#text-track-showing id=text-track-api:text-track-showing>text track showing</a> mode.</dl>

    <p>Can be set, to change the mode.</p>
   <dt><code><var>textTrack</var>.<span id=dom-texttrack-cues>cues</span></code><dd>
    <p>Returns the <a href=#text-track-list-of-cues id=text-track-api:text-track-list-of-cues>text track list of cues</a>, as a <code>TextTrackCueList</code>
    object.</p>
   <dt><code><var>textTrack</var>.<span id=dom-texttrack-activecues>activeCues</span></code><dd>
    <p>Returns the <a href=#text-track-cue id=text-track-api:text-track-cue>text track cues</a> from the <a href=#text-track-list-of-cues id=text-track-api:text-track-list-of-cues-2>text track
    list of cues</a> that are currently active (i.e. that start before the <span>current playback
    position</span> and end after it), as a <code>TextTrackCueList</code> object.</p>
   <dt><code><var>textTrack</var>.<span id=dom-texttrack-addcue>addCue</span>(<var>cue</var>)</code><dd><p>Adds the given cue to <var>textTrack</var>'s <a href=#text-track-list-of-cues id=text-track-api:text-track-list-of-cues-3>text track list of
   cues</a>.<dt><code><var>textTrack</var>.<span id=dom-texttrack-removecue>removeCue</span>(<var>cue</var>)</code><dd><p>Removes the given cue from <var>textTrack</var>'s <a href=#text-track-list-of-cues id=text-track-api:text-track-list-of-cues-4>text track list of
   cues</a>.</dl>

  

  <div class=example>

   <p>In this example, an <code id=text-track-api:the-audio-element><a href=#the-audio-element>audio</a></code> element is used to play a specific sound-effect from a
   sound file containing many sound effects. A cue is used to pause the audio, so that it ends
   exactly at the end of the clip, even if the browser is busy running some script. If the page had
   relied on script to pause the audio, then the start of the next clip might be heard if the
   browser was not able to run the script at the exact time specified.</p>

   <pre><code class='js'><c- a>var</c-> sfx <c- o>=</c-> <c- k>new</c-> Audio<c- p>(</c-><c- t>&apos;sfx.wav&apos;</c-><c- p>);</c->
<c- a>var</c-> sounds <c- o>=</c-> sfx<c- p>.</c->addTextTrack<c- p>(</c-><c- t>&apos;metadata&apos;</c-><c- p>);</c->

<c- c1>// add sounds we care about</c->
<c- a>function</c-> addFX<c- p>(</c->start<c- p>,</c-> end<c- p>,</c-> name<c- p>)</c-> <c- p>{</c->
  <c- a>var</c-> cue <c- o>=</c-> <c- k>new</c-> VTTCue<c- p>(</c->start<c- p>,</c-> end<c- p>,</c-> <c- t>&apos;&apos;</c-><c- p>);</c->
  cue<c- p>.</c->id <c- o>=</c-> name<c- p>;</c->
  cue<c- p>.</c->pauseOnExit <c- o>=</c-> <c- kc>true</c-><c- p>;</c->
  sounds<c- p>.</c->addCue<c- p>(</c->cue<c- p>);</c->
<c- p>}</c->
addFX<c- p>(</c-><c- mf>12.783</c-><c- p>,</c-> <c- mf>13.612</c-><c- p>,</c-> <c- t>&apos;dog bark&apos;</c-><c- p>);</c->
addFX<c- p>(</c-><c- mf>13.612</c-><c- p>,</c-> <c- mf>15.091</c-><c- p>,</c-> <c- t>&apos;kitten mew&apos;</c-><c- p>);</c->

<c- a>function</c-> playSound<c- p>(</c->id<c- p>)</c-> <c- p>{</c->
  sfx<c- p>.</c->currentTime <c- o>=</c-> sounds<c- p>.</c->getCueById<c- p>(</c->id<c- p>).</c->startTime<c- p>;</c->
  sfx<c- p>.</c->play<c- p>();</c->
<c- p>}</c->

<c- c1>// play a bark as soon as we can</c->
sfx<c- p>.</c->oncanplaythrough <c- o>=</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c->
  playSound<c- p>(</c-><c- t>&apos;dog bark&apos;</c-><c- p>);</c->
<c- p>}</c->
<c- c1>// meow when the user tries to leave,</c->
<c- c1>// and have the browser ask them to stay</c->
window<c- p>.</c->onbeforeunload <c- o>=</c-> <c- a>function</c-> <c- p>(</c->e<c- p>)</c-> <c- p>{</c->
  playSound<c- p>(</c-><c- t>&apos;kitten mew&apos;</c-><c- p>);</c->
  e<c- p>.</c->preventDefault<c- p>();</c->
<c- p>}</c-></code></pre>

  </div>

  <hr>

  

  <dl class=domintro><dt><code><var>cuelist</var>.<span id=dom-texttrackcuelist-length>length</span></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackCueList/length title="The length read-only property of the TextTrackCueList interface returns the number of cues in the list.">TextTrackCueList/length</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd><p>Returns the number of <a href=#text-track-cue id=text-track-api:text-track-cue-2>cues</a> in the list.<dt><code><var>cuelist</var>[<var>index</var>]</code><dd>
    <p>Returns the <a href=#text-track-cue id=text-track-api:text-track-cue-3>text track cue</a> with index <var>index</var> in the list. The cues are
    sorted in <a href=#text-track-cue-order id=text-track-api:text-track-cue-order>text track cue order</a>.</p>
   <dt><code><var>cuelist</var>.<span id=dom-texttrackcuelist-getcuebyid>getCueById</span>(<var>id</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackCueList/getCueById title="The getCueById() method of the TextTrackCueList interface returns the first VTTCue in the list represented by the TextTrackCueList object whose identifier matches the value of id.">TextTrackCueList/getCueById</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the first <a href=#text-track-cue id=text-track-api:text-track-cue-4>text track cue</a> (in <a href=#text-track-cue-order id=text-track-api:text-track-cue-order-2>text track cue order</a>) with
    <a href=#text-track-cue-identifier id=text-track-api:text-track-cue-identifier>text track cue identifier</a> <var>id</var>.</p>

    <p>Returns null if none of the cues have the given identifier or if the argument is the empty
    string.</p>
   </dl>

  

  <hr>

  

  <dl class=domintro><dt><code><var>cue</var>.<span id=dom-texttrackcue-track>track</span></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackCue/track title="The track read-only property of the TextTrackCue interface returns the TextTrack object that this cue belongs to.">TextTrackCue/track</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the <code>TextTrack</code> object to which this <a href=#text-track-cue id=text-track-api:text-track-cue-5>text track cue</a> belongs,
    if any, or null otherwise.</p>
   <dt><code><var>cue</var>.<span id=dom-texttrackcue-id>id</span> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackCue/id title="The id property of the TextTrackCue interface returns and sets the identifier for this cue.">TextTrackCue/id</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the <a href=#text-track-cue-identifier id=text-track-api:text-track-cue-identifier-2>text track cue identifier</a>.</p>

    <p>Can be set.</p>
   <dt><code><var>cue</var>.<span id=dom-texttrackcue-starttime>startTime</span> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackCue/startTime title="The startTime property of the TextTrackCue interface returns and sets the start time of the cue.">TextTrackCue/startTime</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the <a href=#text-track-cue-start-time id=text-track-api:text-track-cue-start-time>text track cue start time</a>, in seconds.</p>

    <p>Can be set.</p>
   <dt><code><var>cue</var>.<span id=dom-texttrackcue-endtime>endTime</span> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackCue/endTime title="The endTime property of the TextTrackCue interface returns and sets the end time of the cue.">TextTrackCue/endTime</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the <a href=#text-track-cue-end-time id=text-track-api:text-track-cue-end-time>text track cue end time</a>, in seconds.</p>

    <p>Returns positive Infinity for an <a href=#unbounded-text-track-cue id=text-track-api:unbounded-text-track-cue>unbounded text track cue</a>.</p>

    <p>Can be set.</p>
   <dt><code><var>cue</var>.<span id=dom-texttrackcue-pauseonexit>pauseOnExit</span> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackCue/pauseOnExit title="The pauseOnExit property of the TextTrackCue interface returns or sets the flag indicating whether playback of the media should pause when the end of the range to which this cue applies is reached.">TextTrackCue/pauseOnExit</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns true if the <a href=#text-track-cue-pause-on-exit-flag id=text-track-api:text-track-cue-pause-on-exit-flag>text track cue pause-on-exit flag</a> is set, false
    otherwise.</p>

    <p>Can be set.</p>
   </dl>

  



  <h6 id=best-practices-for-metadata-text-tracks><span class=secno>4.8.11.11.4</span> Best practices for metadata text tracks<a href=#best-practices-for-metadata-text-tracks class=self-link></a></h6>

  

  <p>Text tracks can be used for storing data relating to the media data, for interactive or
  augmented views.</p>

  <p>For example, a page showing a sports broadcast could include information about the current
  score. Suppose a robotics competition was being streamed live. The image could be overlaid with
  the scores, as follows:</p>

  <p><iframe src="data:text/html;charset=utf-8,%3C!DOCTYPE%20html%3E%0A%3Cstyle%3E%0A%20body%2C%20html%20%7B%20margin%3A%200%3B%20padding%3A%200%3B%20overflow%3A%20hidden%3B%20%7D%0A%20div%20%7B%20width%3A%20600px%3B%20height%3A%20400px%3B%20position%3A%20relative%3B%20%7D%0A%20p%20%7B%20position%3A%20absolute%3B%20top%3A%200%3B%20margin%3A%200.25em%3B%20font%3A%20small-caps%20900%202em%20sans-serif%3B%20text-shadow%3A%20white%200%200%204px%3B%20%7D%0A%20span%20%7B%20display%3A%20block%3B%20%7D%0A%20.left%20%7B%20color%3A%20red%3B%20left%3A%200%3B%20text-align%3A%20left%3B%20%7D%0A%20.right%20%7B%20color%3A%20blue%3B%20right%3A%200%3B%20text-align%3A%20right%3B%20%7D%0A%20.middle%20%7B%20color%3A%20white%3B%20top%3A%20auto%3B%20bottom%3A%200%3B%20left%3A%200%3B%20right%3A%200%3B%20text-align%3A%20center%3B%20text-shadow%3A%20black%200%200%204px%3B%20%7D%0A%20.middle%20span%20%7B%20display%3A%20inline-block%3B%20margin%3A%200%201em%3B%20font-size%3A%200.75em%3B%20text-transform%3A%20uppercase%3B%20%7D%0A%3C%2Fstyle%3E%0A%3Cdiv%3E%0A%20%3Cimg%20src%3D%22https%3A%2F%2Fhtml.spec.whatwg.org%2Fimages%2Frobots.jpeg%22%3E%0A%20%3Cp%20class%3D%22score%20left%22%3E%3Cspan%3ERed%20Alliance%3C%2Fspan%3E%20%3Cspan%3E78%3C%2Fspan%3E%3C%2Fp%3E%0A%20%3Cp%20class%3D%22score%20right%22%3E%3Cspan%3EBlue%20Alliance%3C%2Fspan%3E%20%3Cspan%3E66%3C%2Fspan%3E%3C%2Fp%3E%0A%20%3Cp%20class%3D%22score%20middle%22%3E%3Cspan%3EQual%20Match%2037%3C%2Fspan%3E%20%3Cspan%3EFriday%2014%3A21%3C%2Fspan%3E%0A%3C%2Fdiv%3E" width=600 height=400></iframe>

  <p>In order to make the score display render correctly whenever the user seeks to an arbitrary
  point in the video, the metadata text track cues need to be as long as is appropriate for the
  score. For example, in the frame above, there would be maybe one cue that lasts the length of the
  match that gives the match number, one cue that lasts until the blue alliance's score changes, and
  one cue that lasts until the red alliance's score changes. If the video is just a stream of the
  live event, the time in the bottom right would presumably be automatically derived from the
  current video time, rather than based on a cue. However, if the video was just the highlights,
  then that might be given in cues also.</p>

  <p>The following shows what fragments of this could look like in a WebVTT file:</p>

  <pre>WEBVTT

...

05:10:00.000 --> 05:12:15.000
matchtype:qual
matchnumber:37

...

05:11:02.251 --> 05:11:17.198
red:78

05:11:03.672 --> 05:11:54.198
blue:66

05:11:17.198 --> 05:11:25.912
red:80

05:11:25.912 --> 05:11:26.522
red:83

05:11:26.522 --> 05:11:26.982
red:86

05:11:26.982 --> 05:11:27.499
red:89

...</pre>

  <p>The key here is to notice that the information is given in cues that span the length of time to
  which the relevant event applies. If, instead, the scores were given as zero-length (or very
  brief, nearly zero-length) cues when the score changes, for example saying "red+2" at
  05:11:17.198, "red+3" at 05:11:25.912, etc, problems arise: primarily, seeking is much harder to
  implement, as the script has to walk the entire list of cues to make sure that no notifications
  have been missed; but also, if the cues are short it's possible the script will never see that
  they are active unless it listens to them specifically.</p>

  <p>When using cues in this manner, authors are encouraged to use the <code id=best-practices-for-metadata-text-tracks:event-media-cuechange><a href=#event-media-cuechange>cuechange</a></code> event to update the current annotations. (In
  particular, using the <code id=best-practices-for-metadata-text-tracks:event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> event would be less
  appropriate as it would require doing work even when the cues haven't changed, and, more
  importantly, would introduce a higher latency between when the metadata cues become active and
  when the display is updated, since <code id=best-practices-for-metadata-text-tracks:event-media-timeupdate-2><a href=#event-media-timeupdate>timeupdate</a></code> events
  are rate-limited.)</p>



  <h5 id=identifying-a-track-kind-through-a-url><span class=secno>4.8.11.12</span> Identifying a track kind through a URL<a href=#identifying-a-track-kind-through-a-url class=self-link></a></h5>

  <p>Other specifications or formats that need a <a id=identifying-a-track-kind-through-a-url:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> to identify the return values of
  the <code>AudioTrack</code> <code id=identifying-a-track-kind-through-a-url:dom-audiotrack-kind><a href=#dom-audiotrack-kind>kind</a></code> or
  <code>VideoTrack</code> <code id=identifying-a-track-kind-through-a-url:dom-videotrack-kind><a href=#dom-videotrack-kind>kind</a></code> IDL attributes, or identify
  the <a href=#text-track-kind id=identifying-a-track-kind-through-a-url:text-track-kind>kind of text track</a>, must use the
  <code id=identifying-a-track-kind-through-a-url:about:html-kind><a href=urls-and-fetching.html#about:html-kind>about:html-kind</a></code> <a id=identifying-a-track-kind-through-a-url:url-2 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>.</p>



  <h5 id=user-interface><span class=secno>4.8.11.13</span> User interface<a href=#user-interface class=self-link></a></h5>

  <p>The <dfn data-dfn-for=audio,video id=attr-media-controls data-dfn-type=element-attr><code>controls</code></dfn> attribute is a <a id=user-interface:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>.
  If present, it indicates that the author has not provided a scripted controller and would like the
  user agent to provide its own set of controls.</p>

  

  <dl class=domintro><dt><code><var>media</var>.<span id=dom-media-volume>volume</span> [ = <var>value</var> ]</code><dd>
    <p>Returns the current playback volume, as a number in the range 0.0 to 1.0, where 0.0 is the
    quietest and 1.0 the loudest.</p>

    <p>Can be set, to change the volume.</p>

    <p>Throws an <a id=user-interface:indexsizeerror href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=user-interface:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the new
    value is not in the range 0.0 .. 1.0.</p>
   <dt><code><var>media</var>.<span id=dom-media-muted>muted</span> [ = <var>value</var> ]</code><dd>
    <p>Returns true if audio is muted, overriding the <code id=user-interface:dom-media-volume><a href=#dom-media-volume>volume</a></code>
    attribute, and false if the <code id=user-interface:dom-media-volume-2><a href=#dom-media-volume>volume</a></code> attribute is being
    honored.</p>

    <p>Can be set, to change whether the audio is muted or not.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=audio,video id=attr-media-muted data-dfn-type=element-attr><code>muted</code></dfn>
  content attribute on <a href=#media-element id=user-interface:media-element>media elements</a> is a <a id=user-interface:boolean-attribute-2 href=common-microsyntaxes.html#boolean-attribute>boolean
  attribute</a> that controls the default state of the audio output of the <a href=#media-resource id=user-interface:media-resource>media
  resource</a>, potentially overriding user preferences.</p>

  <p class=note>This attribute has no dynamic effect (it only controls the default state of the
  element).</p>

  <div class=example>

   <p>This video (an advertisement) autoplays, but to avoid annoying users, it does so without
   sound, and allows the user to turn the sound on. The user agent can pause the video if it's
   unmuted without a user interaction.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>video</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;adverts.cgi?kind=video&quot;</c-> <c- e>controls</c-> <c- e>autoplay</c-> <c- e>loop</c-> <c- e>muted</c-><c- p>&gt;&lt;/</c-><c- f>video</c-><c- p>&gt;</c-></code></pre>

  </div>




  <h5 id=time-ranges><span class=secno>4.8.11.14</span> Time ranges<a href=#time-ranges class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges title="When loading a media resource for use by an <audio> or <video> element, the TimeRanges interface is used for representing the time ranges of the media resource that have been buffered, the time ranges that have been played, and the time ranges that are seekable.">TimeRanges</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>6+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <p>Objects implementing the <code>TimeRanges</code> interface
  represent a list of ranges (periods) of time.</p>

  

  <dl class=domintro><dt><code><var>media</var>.<span id=dom-timeranges-length>length</span></code><dd><p>Returns the number of ranges in the object.<dt><code><var>time</var> = <var>media</var>.<span id=dom-timeranges-start>start</span>(<var>index</var>)</code><dd>
    <p>Returns the time for the start of the range with the given index.</p>

    <p>Throws an <a id=time-ranges:indexsizeerror href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=time-ranges:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the index
    is out of range.</p>
   <dt><code><var>time</var> = <var>media</var>.<span id=dom-timeranges-end>end</span>(<var>index</var>)</code><dd>
    <p>Returns the time for the end of the range with the given index.</p>

    <p>Throws an <a id=time-ranges:indexsizeerror-2 href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=time-ranges:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the index
    is out of range.</p>
   </dl>

  


  <h5 id=the-trackevent-interface><span class=secno>4.8.11.15</span> The <code>TrackEvent</code> interface<a href=#the-trackevent-interface class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TrackEvent title="The TrackEvent interface, which is part of the HTML DOM specification, is used for events which represent changes to a set of available tracks on an HTML media element; these events are addtrack and removetrack.">TrackEvent</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>27+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>11</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  

  <dl class=domintro><dt><code><var>event</var>.<span id=dom-trackevent-track>track</span></code><dd>
    <p>Returns the track object (<code>TextTrack</code>, <code>AudioTrack</code>, or
    <code>VideoTrack</code>) to which the event relates.</p>
   </dl>

  



  <h5 id=mediaevents><span class=secno>4.8.11.16</span> Events summary<a href=#mediaevents class=self-link></a></h5>

  

  <p>The following events fire on <a href=#media-element id=mediaevents:media-element>media elements</a> as part of the
  processing model described above:</p>

  <table><thead><tr><th>Event name
     <th>Interface
     <th>Fired when...
     <th>Preconditions

   <tbody><tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-loadstart data-dfn-type=event><code>loadstart</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadstart_event title="The loadstart event is fired when the browser has started to load a resource.">HTMLMediaElement/loadstart_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td><code id=mediaevents:event><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The user agent begins looking for <a href=#media-data id=mediaevents:media-data>media data</a>, as part of the <span>resource selection algorithm</span>.

     <td><code id=mediaevents:dom-media-networkstate><a href=#dom-media-networkstate>networkState</a></code> equals <code id=mediaevents:dom-media-network_loading><a href=#dom-media-network_loading>NETWORK_LOADING</a></code>

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-progress data-dfn-type=event><code>progress</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/progress_event title="The progress event is fired periodically as the browser loads a resource.">HTMLMediaElement/progress_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td><code id=mediaevents:event-2><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The user agent is fetching <a href=#media-data id=mediaevents:media-data-2>media data</a>.

     <td><code id=mediaevents:dom-media-networkstate-2><a href=#dom-media-networkstate>networkState</a></code> equals <code id=mediaevents:dom-media-network_loading-2><a href=#dom-media-network_loading>NETWORK_LOADING</a></code>

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-suspend data-dfn-type=event><code>suspend</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/suspend_event title="The suspend event is fired when media data loading has been suspended.">HTMLMediaElement/suspend_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-3><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The user agent is intentionally not currently fetching <a href=#media-data id=mediaevents:media-data-3>media data</a>.

     <td><code id=mediaevents:dom-media-networkstate-3><a href=#dom-media-networkstate>networkState</a></code> equals <code id=mediaevents:dom-media-network_idle><a href=#dom-media-network_idle>NETWORK_IDLE</a></code>

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-abort data-dfn-type=event><code>abort</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/abort_event title="The abort event is fired when the resource was not fully loaded, but not as the result of an error.">HTMLMediaElement/abort_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>9+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td><code id=mediaevents:event-4><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The user agent stops fetching the <a href=#media-data id=mediaevents:media-data-4>media data</a> before it is completely
     downloaded, but not due to an error.

     <td><code id=mediaevents:dom-media-error><a href=#dom-media-error>error</a></code> is an object with the code <code id=mediaevents:dom-mediaerror-media_err_aborted><a href=#dom-mediaerror-media_err_aborted>MEDIA_ERR_ABORTED</a></code>. <code id=mediaevents:dom-media-networkstate-4><a href=#dom-media-networkstate>networkState</a></code> equals either <code id=mediaevents:dom-media-network_empty><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code> or <code id=mediaevents:dom-media-network_idle-2><a href=#dom-media-network_idle>NETWORK_IDLE</a></code>, depending on when the download was aborted.

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-error data-dfn-type=event><code>error</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error_event title="The error event is fired when the resource could not be loaded due to an error (for example, a network connectivity problem).">HTMLMediaElement/error_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>11.6+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div></div><td><code id=mediaevents:event-5><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>An error occurs while fetching the <a href=#media-data id=mediaevents:media-data-5>media data</a> or the type of the resource
     is not a supported media format.

     <td><code id=mediaevents:dom-media-error-2><a href=#dom-media-error>error</a></code> is an object with the code <code id=mediaevents:dom-mediaerror-media_err_network><a href=#dom-mediaerror-media_err_network>MEDIA_ERR_NETWORK</a></code> or higher. <code id=mediaevents:dom-media-networkstate-5><a href=#dom-media-networkstate>networkState</a></code> equals either <code id=mediaevents:dom-media-network_empty-2><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code> or <code id=mediaevents:dom-media-network_idle-3><a href=#dom-media-network_idle>NETWORK_IDLE</a></code>, depending on when the download was aborted.

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-emptied data-dfn-type=event><code>emptied</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/emptied_event title="The emptied event is fired when the media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.">HTMLMediaElement/emptied_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-6><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>A <a href=#media-element id=mediaevents:media-element-2>media element</a> whose <code id=mediaevents:dom-media-networkstate-6><a href=#dom-media-networkstate>networkState</a></code>
     was previously not in the <code id=mediaevents:dom-media-network_empty-3><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code> state has
     just switched to that state (either because of a fatal error during load that's about to be
     reported, or because the <code id=mediaevents:dom-media-load><a href=#dom-media-load>load()</a></code> method was invoked while
     the <span>resource selection algorithm</span> was already
     running).

     <td><code id=mediaevents:dom-media-networkstate-7><a href=#dom-media-networkstate>networkState</a></code> is <code id=mediaevents:dom-media-network_empty-4><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>; all the IDL attributes are in their
     initial states.

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-stalled data-dfn-type=event><code>stalled</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/stalled_event title="The stalled event is fired when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.">HTMLMediaElement/stalled_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-7><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The user agent is trying to fetch <a href=#media-data id=mediaevents:media-data-6>media data</a>, but data is unexpectedly not
     forthcoming.

     <td><code id=mediaevents:dom-media-networkstate-8><a href=#dom-media-networkstate>networkState</a></code> is <code id=mediaevents:dom-media-network_loading-3><a href=#dom-media-network_loading>NETWORK_LOADING</a></code>.

   <tbody><tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-loadedmetadata data-dfn-type=event><code>loadedmetadata</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event title="The loadedmetadata event is fired when the metadata has been loaded.">HTMLMediaElement/loadedmetadata_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-8><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The user agent has just determined the duration and dimensions of the <a href=#media-resource id=mediaevents:media-resource>media
     resource</a> and <a href=#the-text-tracks-are-ready id=mediaevents:the-text-tracks-are-ready>the text tracks are ready</a>.

     <td><code id=mediaevents:dom-media-readystate><a href=#dom-media-readystate>readyState</a></code> is newly equal to <code id=mediaevents:dom-media-have_metadata><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> or greater for the first time.

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-loadeddata data-dfn-type=event><code>loadeddata</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadeddata_event title="The loadeddata event is fired when the frame at the current playback position of the media has finished loading; often the first frame.">HTMLMediaElement/loadeddata_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-9><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The user agent can render the <a href=#media-data id=mediaevents:media-data-7>media data</a> at the <span>current playback
     position</span> for the first time.

     <td><code id=mediaevents:dom-media-readystate-2><a href=#dom-media-readystate>readyState</a></code> newly increased to <code id=mediaevents:dom-media-have_current_data><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> or greater for the first time.

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-canplay data-dfn-type=event><code>canplay</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplay_event title="The canplay event is fired when the user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.">HTMLMediaElement/canplay_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-10><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The user agent can resume playback of the <a href=#media-data id=mediaevents:media-data-8>media data</a>, but estimates that if
     playback were to be started now, the <a href=#media-resource id=mediaevents:media-resource-2>media resource</a> could not be rendered at the
     current playback rate up to its end without having to stop for further buffering of content.

     <td><code id=mediaevents:dom-media-readystate-3><a href=#dom-media-readystate>readyState</a></code> newly increased to <code id=mediaevents:dom-media-have_future_data><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> or greater.

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-canplaythrough data-dfn-type=event><code>canplaythrough</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplaythrough_event title="The canplaythrough event is fired when the user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.">HTMLMediaElement/canplaythrough_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-11><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The user agent estimates that if playback were to be started now, the <a href=#media-resource id=mediaevents:media-resource-3>media
     resource</a> could be rendered at the current playback rate all the way to its end without
     having to stop for further buffering.

     <td><code id=mediaevents:dom-media-readystate-4><a href=#dom-media-readystate>readyState</a></code> is newly equal to <code id=mediaevents:dom-media-have_enough_data><a href=#dom-media-have_enough_data>HAVE_ENOUGH_DATA</a></code>.

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-playing data-dfn-type=event><code>playing</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playing_event title="The playing event is fired after playback is first started, and whenever it is restarted. For example it is fired when playback resumes after having been paused or delayed due to lack of data.">HTMLMediaElement/playing_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-12><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>Playback is ready to start after having been paused or delayed due to lack of <a href=#media-data id=mediaevents:media-data-9>media
     data</a>.

     <td><code id=mediaevents:dom-media-readystate-5><a href=#dom-media-readystate>readyState</a></code> is newly greater than or equal to
     <code id=mediaevents:dom-media-have_future_data-2><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> and <code id=mediaevents:dom-media-paused><a href=#dom-media-paused>paused</a></code> is false, or <code id=mediaevents:dom-media-paused-2><a href=#dom-media-paused>paused</a></code> is newly false and <code id=mediaevents:dom-media-readystate-6><a href=#dom-media-readystate>readyState</a></code> is greater than or equal to <code id=mediaevents:dom-media-have_future_data-3><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code>. Even if this event fires, the
     element might still not be <span>potentially playing</span>, e.g. if the element is
     <span>paused for user interaction</span> or <span>paused for in-band content</span>.

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-waiting data-dfn-type=event><code>waiting</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/waiting_event title="The waiting event is fired when playback has stopped because of a temporary lack of data.">HTMLMediaElement/waiting_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td><code id=mediaevents:event-13><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>Playback has stopped because the next frame is not available, but the user agent expects
     that frame to become available in due course.

     <td><code id=mediaevents:dom-media-readystate-7><a href=#dom-media-readystate>readyState</a></code> is less than or equal to <code id=mediaevents:dom-media-have_current_data-2><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code>, and <code id=mediaevents:dom-media-paused-3><a href=#dom-media-paused>paused</a></code> is false. Either <code id=mediaevents:dom-media-seeking><a href=#dom-media-seeking>seeking</a></code> is true, or the <span>current playback position</span>
     is not contained in any of the ranges in <code id=mediaevents:dom-media-buffered><a href=#dom-media-buffered>buffered</a></code>. It
     is possible for playback to stop for other reasons without <code id=mediaevents:dom-media-paused-4><a href=#dom-media-paused>paused</a></code> being false, but those reasons do not fire this event
     (and when those situations resolve, a separate <code id=mediaevents:event-media-playing><a href=#event-media-playing>playing</a></code>
     event is not fired either): e.g., <span>playback has ended</span>, or
     playback <span>stopped due to errors</span>, or the element has <span>paused for user
     interaction</span> or <span>paused for in-band content</span>.

   <tbody><tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-seeking data-dfn-type=event><code>seeking</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event title="The seeking event is fired when a seek operation starts, meaning the Boolean seeking attribute has changed to true and the media is seeking a new position.">HTMLMediaElement/seeking_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-14><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The <code id=mediaevents:dom-media-seeking-2><a href=#dom-media-seeking>seeking</a></code> IDL attribute changed to true, and the user agent has started seeking to a new position.

     <td>

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-seeked data-dfn-type=event><code>seeked</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeked_event title="The seeked event is fired when a seek operation completed, the current playback position has changed, and the Boolean seeking attribute is changed to false.">HTMLMediaElement/seeked_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-15><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The <code id=mediaevents:dom-media-seeking-3><a href=#dom-media-seeking>seeking</a></code> IDL attribute changed to false after the <span>current playback position</span> was changed.

     <td>

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-ended data-dfn-type=event><code>ended</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event title="The ended event is fired when playback or streaming has stopped because the end of the media was reached or because no further data is available.">HTMLMediaElement/ended_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-16><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>Playback has stopped because the end of the <a href=#media-resource id=mediaevents:media-resource-4>media resource</a> was reached.

     <td><code id=mediaevents:dom-media-currenttime><a href=#dom-media-currenttime>currentTime</a></code> equals the end of the <a href=#media-resource id=mediaevents:media-resource-5>media
     resource</a>; <code id=mediaevents:dom-media-ended><a href=#dom-media-ended>ended</a></code> is true.

   <tbody><tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-durationchange data-dfn-type=event><code>durationchange</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/durationchange_event title="The durationchange event is fired when the duration attribute has been updated.">HTMLMediaElement/durationchange_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-17><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The <code id=mediaevents:dom-media-duration><a href=#dom-media-duration>duration</a></code> attribute has just been updated.

     <td>

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-timeupdate data-dfn-type=event><code>timeupdate</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event title="The timeupdate event is fired when the time indicated by the currentTime attribute has been updated.">HTMLMediaElement/timeupdate_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-18><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The <span>current playback position</span> changed as part of normal playback or in an especially interesting way, for example discontinuously.

     <td>

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-play data-dfn-type=event><code>play</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event title="The play event is fired when the paused property is changed from true to false, as a result of the play method, or the autoplay attribute.">HTMLMediaElement/play_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-19><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The element is no longer paused. Fired after the <code id=mediaevents:dom-media-play><a href=#dom-media-play>play()</a></code>
     method has returned, or when the <code id=mediaevents:attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code> attribute
     has caused playback to begin.

     <td><code id=mediaevents:dom-media-paused-5><a href=#dom-media-paused>paused</a></code> is newly false.

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-pause data-dfn-type=event><code>pause</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause_event title="The pause event is sent when a request to pause an activity is handled and the activity has entered its paused state, most commonly after the media has been paused through a call to the element's pause() method.">HTMLMediaElement/pause_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-20><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The element has been paused. Fired after the <code id=mediaevents:dom-media-pause><a href=#dom-media-pause>pause()</a></code>
     method has returned.

     <td><code id=mediaevents:dom-media-paused-6><a href=#dom-media-paused>paused</a></code> is newly true.

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-ratechange data-dfn-type=event><code>ratechange</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ratechange_event title="The ratechange event is fired when the playback rate has changed.">HTMLMediaElement/ratechange_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-21><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>Either the <code id=mediaevents:dom-media-defaultplaybackrate><a href=#dom-media-defaultplaybackrate>defaultPlaybackRate</a></code> or the
     <code id=mediaevents:dom-media-playbackrate><a href=#dom-media-playbackrate>playbackRate</a></code> attribute has just been updated.

     <td>

   <tbody><tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-resize data-dfn-type=event><code>resize</code></dfn>

     <td><code id=mediaevents:event-22><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>One or both of the <code id=mediaevents:dom-video-videowidth><a href=#dom-video-videowidth>videoWidth</a></code> and <code id=mediaevents:dom-video-videoheight><a href=#dom-video-videoheight>videoHeight</a></code> attributes have just been updated.

     <td><a href=#media-element id=mediaevents:media-element-3>Media element</a> is a <code id=mediaevents:the-video-element><a href=#the-video-element>video</a></code> element; <code id=mediaevents:dom-media-readystate-8><a href=#dom-media-readystate>readyState</a></code> is not <code id=mediaevents:dom-media-have_nothing><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-volumechange data-dfn-type=event><code>volumechange</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volumechange_event title="The volumechange event is fired when either the volume attribute or the muted attribute has changed.">HTMLMediaElement/volumechange_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td><code id=mediaevents:event-23><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>Either the <code id=mediaevents:dom-media-volume><a href=#dom-media-volume>volume</a></code> attribute or the <code id=mediaevents:dom-media-muted><a href=#dom-media-muted>muted</a></code> attribute has changed. Fired after the relevant
     attribute's setter has returned.

     <td>

  </table>


  <p>The following event fires on <code id=mediaevents:the-source-element><a href=embedded-content.html#the-source-element>source</a></code> elements:</p>

  <table><thead><tr><th>Event name

     <th>Interface

     <th>Fired when...

   <tbody><tr><td><dfn data-dfn-for=HTMLSourceElement id=event-source-error data-dfn-type=event><code>error</code></dfn>

     <td><code id=mediaevents:event-24><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>An error occurs while fetching the <a href=#media-data id=mediaevents:media-data-10>media data</a> or the type of the resource
     is not a supported media format.

  </table>


  <p>The following events fire on <code>AudioTrackList</code>, <code>VideoTrackList</code>, and
  <code>TextTrackList</code> objects:</p>

  <table><thead><tr><th>Event name

     <th>Interface

     <th>Fired when...

   <tbody><tr><td><dfn data-dfn-for=AudioTrackList,VideoTrackList,TextTrackList id=event-media-change data-dfn-type=event><code>change</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/AudioTrackList/change_event title="The change event is fired when an audio track is enabled or disabled, for example by changing the track's enabled property.">AudioTrackList/change_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackList/change_event title="The change event is fired when a text track is made active or inactive, or a TextTrackList is otherwise changed.">TextTrackList/change_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span>33+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>4.4+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList/change_event title="The change event is fired when a video track is made active or inactive, for example by changing the track's selected property.">VideoTrackList/change_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><td><code id=mediaevents:event-25><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>One or more tracks in the track list have been enabled or disabled.

    <tr><td><dfn data-dfn-for=AudioTrackList,VideoTrackList,TextTrackList id=event-media-addtrack data-dfn-type=event><code>addtrack</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/AudioTrackList/addtrack_event title="The addtrack event is fired when a track is added to an AudioTrackList.">AudioTrackList/addtrack_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackList/addtrack_event title="The addtrack event is fired when a track is added to a TextTrackList.">TextTrackList/addtrack_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>11</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList/addtrack_event title="The addtrack event is fired when a video track is added to a VideoTrackList.">VideoTrackList/addtrack_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><td><code>TrackEvent</code>

     <td>A track has been added to the track list.

    <tr><td><dfn data-dfn-for=AudioTrackList,VideoTrackList,TextTrackList id=event-media-removetrack data-dfn-type=event><code>removetrack</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/AudioTrackList/removetrack_event title="The removetrack event is fired when a track is removed from an AudioTrackList.">AudioTrackList/removetrack_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackList/removetrack_event title="The removetrack event is fired when a track is removed from a TextTrackList.">TextTrackList/removetrack_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span>33+</span></span><hr><span class="opera yes"><span>Opera</span><span>20+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>4.4+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>20+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList/removetrack_event title="The removetrack event is fired when a video track is removed from a VideoTrackList.">VideoTrackList/removetrack_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><td><code>TrackEvent</code>

     <td>A track has been removed from the track list.

  </table>



  <p>The following event fires on <code>TextTrack</code> objects and <code id=mediaevents:the-track-element><a href=#the-track-element>track</a></code> elements:</p>

  <table><thead><tr><th>Event name

     <th>Interface

     <th>Fired when...

   <tbody><tr><td><dfn data-dfn-for=TextTrack,HTMLTrackElement id=event-media-cuechange data-dfn-type=event><code>cuechange</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLTrackElement/cuechange_event title="The cuechange event fires when a TextTrack has changed the currently displaying cues. The event is fired on both the TextTrack and the HTMLTrackElement in which it's being presented, if any.">HTMLTrackElement/cuechange_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>68+</span></span><span class="safari yes"><span>Safari</span><span>10+</span></span><span class="chrome yes"><span>Chrome</span><span>32+</span></span><hr><span class="opera yes"><span>Opera</span><span>19+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>14+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>4.4.3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>19+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/cuechange_event title="The cuechange event fires when a TextTrack has changed the currently displaying cues. The event is fired on both the TextTrack and the HTMLTrackElement in which it's being presented, if any.">TextTrack/cuechange_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td><code id=mediaevents:event-26><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>One or more cues in the track have become active or stopped being active.

  </table>


  <p>The following events fire on <code id=mediaevents:the-track-element-2><a href=#the-track-element>track</a></code> elements:</p>

  <table><thead><tr><th>Event name

     <th>Interface

     <th>Fired when...

   <tbody><tr><td><dfn data-dfn-for=HTMLTrackElement id=event-track-error data-dfn-type=event><code>error</code></dfn>

     <td><code id=mediaevents:event-27><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>An error occurs while fetching the track data or the type of the resource is not supported text track format.

    <tr><td><dfn data-dfn-for=HTMLTrackElement id=event-track-load data-dfn-type=event><code>load</code></dfn>

     <td><code id=mediaevents:event-28><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>A track data has been fetched and successfully processed.
  </table>


  <p>The following events fire on <code>TextTrackCue</code> objects:</p>

  <table><thead><tr><th>Event name

     <th>Interface

     <th>Fired when...

   <tbody><tr><td><dfn data-dfn-for=TextTrackCue id=event-media-enter data-dfn-type=event><code>enter</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackCue/enter_event title="The enter event fires when a cue becomes active. In the case of subtitles or a caption this is when it displays over the media.">TextTrackCue/enter_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td><code id=mediaevents:event-29><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The cue has become active.

    <tr><td><dfn data-dfn-for=TextTrackCue id=event-media-exit data-dfn-type=event><code>exit</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackCue/exit_event title="The exit event fires when a cue stops being active.">TextTrackCue/exit_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td><code id=mediaevents:event-30><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The cue has stopped being active.

  </table>


  


  <h5 id=best-practices-for-authors-using-media-elements><span class=secno>4.8.11.17</span> Best practices for authors using media elements<a href=#best-practices-for-authors-using-media-elements class=self-link></a></h5>

  

  <p>Playing audio and video resources on small devices such as set-top boxes or mobile phones is
  often constrained by limited hardware resources in the device. For example, a device might only
  support three simultaneous videos. For this reason, it is a good practice to release resources
  held by <a href=#media-element id=best-practices-for-authors-using-media-elements:media-element>media elements</a> when they are done playing, either by
  being very careful about removing all references to the element and allowing it to be garbage
  collected, or, even better, by setting the element's <code id=best-practices-for-authors-using-media-elements:attr-media-src><a href=#attr-media-src>src</a></code>
  attribute to an empty string. In cases where <code id=best-practices-for-authors-using-media-elements:dom-media-srcobject><a href=#dom-media-srcobject>srcObject</a></code>
  was set, instead set the <code id=best-practices-for-authors-using-media-elements:dom-media-srcobject-2><a href=#dom-media-srcobject>srcObject</a></code> to null.</p>

  <p>Similarly, when the playback rate is not exactly 1.0, hardware, software, or format limitations
  can cause video frames to be dropped and audio to be choppy or muted.</p>


  



  <nav><a href=iframe-embed-object.html>← 4.8.5 The
  iframe element</a> — <a href=index.html>Table of Contents</a> — <a href=image-maps.html>4.8.12 The map element →</a></nav>
